Blinking fixed header in site with scrolling animation

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);
}

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.

There will be somethingg wrong with your javascript code. I faced the same problem

for eg :

This was the code with blinking div :

    window.onscroll = function () {
            var sticky = document.getElementById("sticky");
            var value = sticky.offsetTop;
                if(window.pageYOffset > value){
                    sticky.classList.add("sticky");
                    console.log("sticky");
                }else{
                    sticky.classList.remove("sticky");
                    console.log("nonsticky");
                }
            }

The problem was that i declared variable in on scroll function

The fix :

        var sticky = document.getElementById("sticky");
        var value = sticky.offsetTop;

        window.onscroll = function () {
            if(window.pageYOffset > value){
                sticky.classList.add("sticky");
                console.log("sticky");
            }else{
                sticky.classList.remove("sticky");
                console.log("nonsticky");
            }
        }