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 a lot of blinking on the page's header and other position:fixed elements.

Is there something I can do to minimize this blinking? (Ideally without jQuery)

Answer 1

Use position: sticky; instead of position: fixed;

Answer 2

Well, it looks like this issue is probably isolated to chrome and the speed at which fixed positioned elements render when CSS animations are firing off during scroll.

I wanted to see if this little trick would hardware-accelerate elements that weren't actually the subject of a CSS animation in chrome. Turns out it did. :)

Here's the solution:

.topbar
{
    -webkit-transform: translate3d(0,0,0);
}

Answer 3

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.