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

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 2

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

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.

Answer 4

**Blinking Fixed Header issue I am facing only in Firebox. Animation property not supported by Firebox?**

*In below code i am applying tranform property to all column who has freeze_vertical class*


  var fixed_vertical_elts = document.getElementsByClassName(table_class + " freeze_vertical");

for (i = 0; i < fixed_vertical_elts.length; i++) {
   fixed_vertical_elts[i].style.webkitTransform = translate_y;
   fixed_vertical_elts[i].style.transform = translate_y;
   fixed_vertical_elts[i].style.background = "#fff";
}



*but one thing I observed once you open a debug mode, from that moment to until reload,fixed header not blink.*


Thanks in adavance

Answer 5

Use position: sticky; instead of position: fixed;

Answer 6

I fixed this by changing the document.body.scrollTop and document.documentElement.scrollTop to > 1 instead of > 50 or > 25:

window.onscroll = function () {
    // Change the scrollTop conditions here.
    if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
        yourTopBarInnerElement.style.display = "none";
    } else {
        yourTopBarInnerElement.style.display = "block";
    };
};

It works for me at least.