position: fixed , has a very bad performance on mobile/tablet devices when scrolling
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
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.