I’m currently stuck on an issue that’s happening with our sticky nav.

When a user scrolls down the screen very slowly our second navigation which is a sticky nav, flickers for some reason. I don’t know what it could be.

I’ve tried adding “-webkit-transform: translateZ(0);” to the “.affix” and ".affix-top" classes with no luck.

This issue is only happening on Chrome and Edge. Firefox, IE11 and Safari this issue does not occur thankfully.

What's causing this? How can/if this be resolved?

2A. Remove the code that toggle between .affix and .affix-top

OR:

2B 1. If you can't do step 2A, you can add this height instead (in order to make affix and affix-top to be with the same height):

2B 2. Remove position: fixed from affix and position static from affix-top (they don't need positions cause we set position to their parent)

In addition, I don't know if it's third party code or not but please try to not use !important property. It's hard to set style for those elements.