Prevent fixed position element from flickering during jQuery animation

Question

This question lends itself to both normal jQuery and jQuery Mobile sites, as I am currently working on one of each at the moment with the same issue. This of course is only an issue on mobile devices, or at least iPhone 4.

Quite simply, a header is set with position: fixed; top: 0;. When I use the jQuery animate() function, either to scroll to a specific element or the top of the page, the header jumps up and down off the top of the screen, as if it can't keep up with the scrolling page.

Is this simply a hardware limitation of mobile devices or is there something I can do to eliminate or at least minimize this occurrence?

Answer 1

I was having the same issue, it seems to be a bug that occurs when there is too much going on inside the page, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.

Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).

Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.

#element {
    position: fixed;
    z-index: 9990;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}