I was not satisfied with the scrolling performance of my website in Safari. Instead of the smooth momentum scrolling that you're used to from native apps you get a clunky one that stops almost immediately as soon as you lift your finger.
After searching on google a bit I stumbled upon this article:
This works indeed but it seems to have some side effects, e.g. jQuery(document).scrollTop() doesn't work anymore and some absolute/fixed elements flicker.
Apart from this article I don't find any more information on the web regarding this which is quite strange I think. Since everybody is seeking for ways to improve performance/UX on mobile and the performance boost feels big I wonder:
- is inertia scrolling actually disabled per default as stated in the article(for me this seems true: iPad mini with iOS9 and iPhone4 with iOS7)?
- are there other ways to achieve this result (fast/smooth/momentum scrolling) without the drawbacks? How? (this site seems to do well: http://m.tutti.ch/ganze-schweiz )
- do I search for the wrong keywords in google or does this really not seem to be something of importance for a lot of people?
Just found out that there seems to be an additional side effect that I didn't notice yet: Mobile Safari: inertia scrolling on body AND minimal UI behavior?
-webkit-overflow-scrolling: touchcss to force inertia scrolling on iOS safari, but like you say, it comes with some side effects. Particularly I am seeing flickering on absolute elements while the element is scrolling. Just curious, have you found your own solution yet? – Byebackground-color: inheritCSS. Using the overflow-scrolling it also introduces the rubber-band scrolling effect. From what I can tell, there is no good way to prevent this. – Bye