What’s With iOS Safari Scrolling?

Have you noticed that app scrolling is much smoother than webpage scrolling in Safari on the iPhone? Web scrolling is horrible! The scroll is slow and sticky (it stops scrolling as soon as you lift your finger). Look at Instagram’s super smooth scroll behavior.

Instagram vs. Google News on iOS Safari

Instagram

Instagram Scroll Behavior

You barely have to brush your finger up the screen and the scroll glides smoothly upwards. More granular scrolling is even easier, only needing a light touch or by maintaining contact with the screen as you scroll.

iOS Safari

Google News on iOS Safari

Now let’s take a look at how Safari handles Google News. As soon as you lift your thumb from the screen, the scroll stops. There is zero “momentum scrolling.” Additionally, it is not nearly as fast. It asks the user to work harder to do less.

The conspiracy theorist in me believes its Apple’s way of funneling users into using apps more, and therefore going into the App Store where it gets a 30% cut of purchases.

 

 

CSS Saves the Day, as Seen on CNN Money

Fortunately, there are workarounds, however they are not widely known or adopted. It appears that in iOS 5 Apple added a CSS trick to enable Native Style Momentum Scrolling. But can you think of a site that uses this? Very few sites do mobile web scrolling well. One of them is CNN Money. Check out its behavior in Safari below. I am not sure exactly how they implemented this native style momentum scrolling, but they get the job done in iOS Safari (but the site breaks with Privacy Mode ON).

 

CNN Money iOS Safari

CNN Money on iOS Safari

I should note that what I have seen of Android’s implementation of mobile Chrome suggests a smoother web scroll experience, minus Apple’s patented rubberbanding at end of lists.

I am happy Apple has released such an easy workaround so web apps like CNN Money can take advantage. Scott Jensen has detailed all of the suggested behaviors for mobile web-apps in an interesting W3C blog post, of which app-like scroll is not mentioned. Perhaps this is because there is really no reason why native style momentum scrolling is a default behavior. And it should just be called: momentum scrolling.

Conclusion

When designing mobile interfaces, it is important to keep each touch interaction in mind. Users are walking down the street or putting their headphones on, and interacting with a small device with precise, sluggish movements is not easy. Momentum scrolling allows less effort to navigate through long lists than the current iOS Safari experience while giving the user to easily make granular scrolling movements.

If you are designing a mobile web app, a smooth scrolling experience is rarely consciously noticed, but users will reward the ease of use by consuming more of your list content.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>