Menu icon Foundation
Sticky Navigation Bar flickering in Chrome

<div class="contain-to-grid sticky" data-options="sticky_on: large">
  <nav class="top-bar" data-topbar>
    ...
  </nav>
</div>
            

         

This what I applied as given in the Foundation Docs , but as you scroll initially the first scroll flickers..any way to fix this ?

topbarstickynav

<div class="contain-to-grid sticky" data-options="sticky_on: large">
  <nav class="top-bar" data-topbar>
    ...
  </nav>
</div>
            

         

This what I applied as given in the Foundation Docs , but as you scroll initially the first scroll flickers..any way to fix this ?

Rafi Benkual over 4 years ago

Can't replicate the flickering http://cdpn.io/krcgG

What browser? What device?

Adam Smith over 4 years ago

I am having this same issue on mobile Safari - using iPhone 4 running iOS 6

Mudassir Khan over 4 years ago

I have the same issue in chrome on my pc...is there any fix for this..?

Peterson Tubini about 4 years ago

Hello,

I had the same issue some minutes ago and I solved it very quickly using some tricks:

You just add the fixed div below into your sticky! it will create like a layer and will solve the flickering :D

Best Regards,

<div class="sticky">
<div class="fixed">
<nav class="top-bar" data-topbar >

........ bla bla your menu
</nav>
</div>
</div>

Aaron Makaruk about 4 years ago

I can confirm that Peterson Tubini's answer worked for me.

I'm using Google Chrome.

Tarun Agrawal about 4 years ago

I am facing the same issue with Chrome on windows. The same code works fine with Mozilla ?

I tried the Peterson Tubini's answer but did not work for me !!!

Asif about 4 years ago

@tarun

Can you share a link for the page or something so that we can see what is happening? a codepen perhaps?

-Asif

Tarun Agrawal about 4 years ago

I tried to create a codepen for the same problem but it seems to be working on codepen. However, when I download the same html file and open in browser it is giving the same problem.

http://codepen.io/tarunagrawal/full/kAgKw

you can copy paste the same html content to new html file and open it using chrome. I believe issue should be reproducible.

I am not sure why it is working on codepen - may be because of iframes.

Asif about 4 years ago

Tarun,

copied and pasted the code in a new file on my system and everything seems to be just fine on chrome I dont see any flicker. Without looking at what you mean by flicker we really cant help you.

But there is a rendering issue with chrome that I came across which I fixed by adding the following to the css of the container, might be the same issue you are talking about:

add this to the css of the container and let me know if this helps.

-webkit-transform: translateZ(0);

Tarun Agrawal about 4 years ago

Thanks for your reply Asif. Suggested CSS did the trick.

I have checked (without suggested CSS) it on other chrome instance and it is working fine so thought that it might be problem with my chrome installation.

With your css change, it started working on my Chrome instance as well.

Thanks a lot for your prompt reply !

Asif about 4 years ago

@Tarun
great to know that it worked :)... All the best

for those who want to know more on this issue they can check out the following link on stackoverflow:

http://stackoverflow.com/questions/15152470/chrome-rendering-issue-fixed-position-anchor-with-ul-in-body

Hope this helps someone.

-Asif

JP Duffy about 4 years ago

Although adding the "fixed" div removed the flicker, it broke the functionality of:

data-options="sticky_on: large"

Can't really consider adding the fixed div as a solution...

Asif about 4 years ago

@JP Duffy

Did you try adding the following CSS to your container?

-webkit-transform: translateZ(0);

Rexford Nkansah about 4 years ago

Haven't experienced any of the flickering before. As always on Latest Foundation via Latest Chrome on Latest Ubuntu

Karolis Ticka over 3 years ago

@Asif answer is better solution.

Carl Quenz about 3 years ago

@Peterson Tubini : this works 90%: at first, it looks great. But suddenly , the whole DIV disappears completely (Google Chrome 43.0).

@Asif: -webkit-transform: translateZ(0); does help either.

Any other solutions for this stupid issue?