position: fixed , has a very bad performance on mobile/tablet devices when scrolling

Question

I'm using position: fixed in my site to fix the navigation bar in the view port, just like facebook's blue bar, but when we tried it on mobile/tablet devices (with their low processing powers) this fixed-bar makes a very bad hit on performance, which makes a very bad user experience when scrolling,

we used a very good articles to enhance the scrolling, and indeed they did, like:

• http://www.html5rocks.com/en/tutorials/speed/scrolling/
• http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
• https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/window-scroll-event.html

After a lot of modifications based on these articles, we reached to the point where position: fixed is the only investigation left for us to enhance in.

The site has an ultra-smooth scrolling when we change it to position: absolute. But with fixing it, the scrolling has a very bad drawback to the extent that it could hang the safari browser on ipad when scrolling in a certain way, did you know how to use position: fixed with a good performance on tablet/mobile devices?

Solution 1

In order to get a smooth scrolling in mobile device, also when having "position: absolute",

you only need to add to the Div the css attribute

-webkit-overflow-scrolling: touch;

Solution 2

If your "tablet/mobile devices", which have performance problem, have a Webkit engine you probably could find answer here: Chrome slow scrolling with fixed position elements

Fast answer: try to add -webkit-transform: translateZ(0); on fixed block.

Solution 3

Now you can use "position: sticky"

Comments

[luigi7up]

If you have a problem of footer (position:fixed) "following you" using -webkit-transform: translateZ(0); solves it (at least in Android < 2.2). THANKs!!!

[HandyAndyShortStack]

This does seem to improve performance quite a bit, though child elements with position:fixed seem to have very poor performance in mobile safari

[Martyn Chamberlin]

This fixed my problem where I needed a div with height: 100% and position: fixed. Without that CSS scrolling was glitchy and with it I'm golden.

[AbdelHady]

What would be the performance difference between the 2?

[Martin Zvarík]

Sticky is best... the motion is flawless... check this TABLE on mobile view: genevo.com/cz/srovnani-detektoru ... if you horizontally scroll it will stick the left columns