9

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:

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?

AbdelHady
  • 9,334
  • 8
  • 56
  • 83

3 Answers3

7

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.

Community
  • 1
  • 1
a.s.panchenko
  • 1,196
  • 16
  • 22
  • 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!!! – luigi7up Feb 14 '14 at 10:34
7

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;

imjared
  • 19,492
  • 4
  • 49
  • 72
user2951807
  • 79
  • 1
  • 6
  • This does seem to improve performance quite a bit, though child elements with `position:fixed` seem to have very poor performance in mobile safari – HandyAndyShortStack Mar 12 '15 at 00:12
  • 1
    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. – Martyn Chamberlin Jun 29 '15 at 16:44
2

Now you can use "position: sticky"

Martin Zvarík
  • 2,120
  • 22
  • 27
  • 1
    What would be the performance difference between the 2? – AbdelHady Jul 24 '20 at 21:04
  • Sticky is best... the motion is flawless... check this TABLE on mobile view: https://www.genevo.com/cz/srovnani-detektoru/ ... if you horizontally scroll it will stick the left columns – Martin Zvarík Jul 25 '20 at 13:36