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?

Answer 1

Now you can use "position: sticky"