Fixed div flashing when link is clicked using Phonegap and Bootstrap

Question

When I'm trying to click a link that is positioned to the bottom of the screen in a colored div using postion:fixed;the page flashes white for a second before displaying the "new" page. If I remove the fixed positioning the new page is loaded without completely erasing the page first and everything works fine. The white flash looks like the page is first completely erased and after that the fixed element is placed on top of it.

Is this problem pure CSS related or is it caused by Phonegap or Bootstrap? And are there any solutions?

This is the code I'm using:

Html:

<div class="container-fluid">
    <div id="navbar" class="row">
        <div class="col-xs-3">
            <a href="lineup.html"><span class="glyphicon glyphicon-time"></span></a>
        </div>
        <div class="col-xs-3">
            <a href="index.html"><span class="glyphicon glyphicon-th-list selected"></span></a>
        </div>
        <div class="col-xs-3">
            <a href="map.html"><span class="glyphicon glyphicon-map-marker"></span></a>
        </div>
        <div class="col-xs-3">
            <a href="faq.html"><span class="glyphicon glyphicon-question-sign"></span></a>
        </div>
    </div>
</div>

css:

#navbar {
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: #312783;
    color: #FFF;
    text-align: center;
}

#navbar a {
    text-decoration: none;
    color: #fff;
    font-size: 1.4em;
}

#navbar a span {
    padding-top: 25%;
    padding-bottom: 25%;
}

#navbar .selected {
    color: #bc3148;
}

Please post your `HTML` and `CSS` here. – Sep 01 '15 at 22:23 — , Sep 01 '15 at 22:23

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

Unless you provide your codes, it is hard to find a solution for your issue.

Try adding this to your css:

#ABC {
    -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
    backface-visibility: hidden;
}

N.B. Replace #ABC with the name of the colored fixed div.

Definition of backface-visibility:

The backface-visibility property defines whether or not an element should be visible when not facing the screen. Source: http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp

And

Similar issue related to flashing of fixed elements: Bootstrap 3 Fixed Top Navbar 'Flickering' On Mobile Scrolling using jQuery One-Page Scrolling Effect

I added the HTML and CSS that I'm using, unfortunately the `backface-visibility` didn't work. — Kecorn, Sep 02 '15 at 07:46

Fixed div flashing when link is clicked using Phonegap and Bootstrap

1 Answers1