8

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:

https://ferdychristant.com/the-world-s-most-overlooked-web-optimization-for-ios-d88c7517d520#.q5dpr1kis

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?

Linus Juhlin
  • 713
  • 7
  • 27
Riesling
  • 5,693
  • 6
  • 27
  • 30
  • I use the `-webkit-overflow-scrolling: touch` css 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? – Norman Breau Mar 15 '16 at 17:55
  • Hi Norman, unfortunately no - I am not using it currently. – Riesling Mar 16 '16 at 08:16
  • Since yesterday I solved the flickering that I was seeing in my own project, it was being caused by an element that has a `background-color: inherit` CSS. 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. – Norman Breau Mar 17 '16 at 00:15

0 Answers0