Bootstrap 3 Fixed Top Navbar 'Flickering' On Mobile Scrolling using jQuery One-Page Scrolling Effect

Question

thanks for checking out this issue.

I was wondering if there is a way to prevent a Bootstrap 3 fixed top navigation bar from 'flickering' or jumping up and down when auto-scrolled using a jQuery plugin.

An active example is here:

http://startbootstrap.com/templates/grayscale/

If you look at this template on a mobile phone (I am using an iPhone 4) use the menu bar and click on a link. The jQuery plugin takes you to the section of the page, but watch the top menu bar. It flickers and dances all around like crazy, and doesn't really stay put.

Here is the code associated with this example, but most other examples I've seen of people doing the same thing in different ways with Bootstrap fixed top nav's have been the same.

HTML:

<body id="page-top" data-spy="scroll" data-target=".navbar-custom">

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand" href="#page-top">
                <i class="fa fa-play-circle"></i>  <span class="light">Start</span> Bootstrap
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li class="page-scroll">
                    <a href="#about">About</a>
                </li>
                <li class="page-scroll">
                    <a href="#download">Download</a>
                </li>
                <li class="page-scroll">
                    <a href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

...

jQuery:

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

CSS:

Combination of the default Bootstrap 3 CSS and the following custom styles:

.navbar {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,.3);
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color: #000;
}

.navbar-brand {
    font-weight: 700;
}

.navbar-brand:focus {
    outline: 0;
}

.navbar-custom a {
    color: #fff;
}

.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}

.navbar-toggle {
    padding: 4px 6px;
    font-size: 16px;
    color: #fff;
}

.navbar-toggle:focus,
.navbar-toggle:active {
    outline: 0;
}

Again, the best way to replicate the problem is by testing this sample site using a mobile device:

http://startbootstrap.com/templates/grayscale/

When tested on a PC, the problem does not occur.

Thanks for reading! If you've already found a fix for this problem I'd love to hear it, or if you're willing to take a crack at this it would be much appreciated!

Hmm, maybe it's just iPhone 4 and earlier. That is reassuring! — IronSummitMedia, Feb 06 '14 at 03:48
@IronSummitMedia please accept the answer if you are happy with it — Mo., Nov 06 '14 at 22:03

score 51 · Accepted Answer · edited Jul 02 '17 at 07:59

51

Try this

{
  -webkit-backface-visibility: hidden;
}

Reference: https://developer.apple.com/library/content/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Using2Dand3DTransforms/Using2Dand3DTransforms.html#//apple_ref/doc/uid/TP40008032-CH15-SW40

edited Jul 02 '17 at 07:59

Cœur

37,241
25
195
267

answered Mar 06 '14 at 12:41

Mo.

26,306
36
159
225

8

Excellent! I had a flickering problem and this fixed it straight away. – DanielGibbs May 22 '14 at 12:51
Run into the same problem and found this answer. But where (or which element) to apply this style? – bcbishop Jan 12 '15 at 19:31
@bcbishop have you applied to the element's class or ID ? – Mo. Jan 12 '15 at 23:33
2

So nice! Such a relief – makeitmorehuman Apr 02 '15 at 23:58
5

.navbar-nav { -webkit-backface-visibility: hidden; } – Picard Nov 30 '15 at 17:37

score 5 · Answer 2 · answered Mar 30 '17 at 10:45

5

I had also 1px jumping problem with bootstrap navbar.

Solved by adding this to parent element (in my case <header>)

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: fixed;
  z-index: 1000;

answered Mar 30 '17 at 10:45

xadamb

51
1
3

score 1 · Answer 3 · answered Jan 18 '16 at 05:45

1

I had flickering from the navbar collapse class so I added min-height to it:

<div class="navbar-collapse collapse" style="min-height:50px; margin:auto;">

answered Jan 18 '16 at 05:45

TacoEater

2,115
20
22

Dylan Valade · Answer 4 · 2015-04-23T01:42:15.630

Setting a height and width on the logo img stopped the flicker. This might not work for every situation but it did stop the jumpy animation.

I'm using Headroom.js with Bootstrap. The logo also changes from a larger square format at the top of the page to a smaller, horizontal orientation when you scroll down. Changing the height attribute with Javascript after the page renders starts the flickering again on Webkit browsers.

score 0 · Answer 5 · answered Oct 17 '18 at 21:59

I had a similar issue on Internet Explorer where the bootstrap navbar would clash with a slideshow plugin (flexslider) on the page. To fix it, set the z-index of the navbar to be a large number.

<ul id="sidebar" class="nav nav-stacked fixed" style="z-index: 100;">

score 0 · Answer 6 · edited Aug 06 '20 at 00:54

0

Make sure the content page has

{
    overflow: hidden
}

edited Aug 06 '20 at 00:54

Cristian

654
1
13
30

answered Aug 05 '20 at 15:38

Rodrigo Suarez

1

Bootstrap 3 Fixed Top Navbar 'Flickering' On Mobile Scrolling using jQuery One-Page Scrolling Effect

6 Answers6

Linked