Blinking fixed header in site with scrolling animation

Question

So I\'m putting a website together which will have a few css3 animations triggered on the scroll event. About halfway through writing the scrolling animations, I\'m noticing

Answer 1

The transform: translate3d(0,0,0) did not fix the issue in my case for e.g. BS navbar. But instead I stumbled over a different solution which fixed the problem for AOS, Animate.css and also WOW.js. In my case all elements with position: fixed had erratic behaviour when scrolling on mobile (touch devices) through the site.

An approach I found here and here did completely solve the existing problems. Add overflow-x: hidden; to your body a/o section elements that contain the animation.

body { overflow-x: hidden; }

or

section { overflow-x: hidden; } //might be a different container element

Finally my BS navbar is no longer affected by any animations.