javascript - 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

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