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?

Disproof

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

Carpic

Answer 2

The support for fixed elements on mobile browsers is very limited, you will need to opt for a absolute position + JS solution, here's an interesting article regarding the subject.

The way i fixed it for my mobile site, i re-adjusted the top of the fixed element depending on the distance scrolled.

P.s: If you are simulating scrolls with js (parallax, anchor tag animation...) if the element is fixed it won't be clickable before the user physically scrolls it for a few pixels. It is a know bug on ios.

Tirza

Answer 3

also, i had a similar problem when i set a div to position:fixed and top:0 and when i tested the mobile app on an android phone the bottom portion of the div would flicker, when i would start to scroll up. so to solve/hack it i set the height:1000px instead of 100% and set overflow:hidden. and now the div no longer flickers.

Travail