Bootstrap 3 Fixed Top Navbar 'flickering' On Mobile Scrolling Using Jquery One-page Scrolling Effect

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

Solution 1:

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

Solution 2:

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;

Solution 3:

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;">

Solution 4:

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.

Solution 5:

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;">