Position: fixed, has very poor performance on mobile / tablet devices when scrolling

Question

I use position: fixed on my website to fix the navigation bar to the presentation port, just like in facebook blue bar, but when we tried it on mobile / tablet devices (with their low processing power), this fixed panel does very a bad performance hit, which makes a very bad user experience while scrolling,

we used very good articles to improve scrolling, and indeed, they did, for example:

• 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 many modifications based on these articles, we have reached the point where position: fixed is the only study that we have left to improve.

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

Answer 1

If your "tablets / mobile devices" that have performance issues have a Webkit mechanism, you can probably find the answer here: Chrome slow scroll with fixed position elements

Quick answer: try adding -webkit-transform: translateZ(0); to a fixed block.

Answer 2

To get smooth scrolling on a mobile device, also having “position: absolute”,

you only need to add the css div attribute

"- webkit-overflow-scrolling: touch;"