Why iOS 11 is great news for the Web
Age old problems solved
In 2015, I published an article titled The world’s most overlooked web optimization for iOS:
In case you do not feel like reading that article, let’s sum it up:
- in IOS, the operating system itself as well as native apps have inertia scrolling, a patented scrolling technique. Inertia scrolling equals to fast scrolling that naturally accelerates and decelerates based on the speed of your initial swipe. It’s fast, smooth and natural. So natural that you may not even be aware of it.
- Web pages, however, do not get this inertia scrolling by default, despite all the misinformation out there. This means that page level scrolling of your web page is slow and immediately stops after you lift your finger, which is dramatically different from inertia scrolling in terms of user experience.
- There is a CSS declaration -webkit-overflow-scrolling: touch that allows you to forcefully enable inertia scrolling on an element of your page that is scrollable. Using some weird hacky tricks, this allows you to apply inertia scrolling at the HTML or Body element, which effectively enables it at the page level.
- The hack is not applied to the typical web page, almost any web site I try (including very big and popular ones) does not have it. This could be because they are unaware of the optimization, or because they are aware yet think this optimization sucks. It sucks because it does have a number of nasty side effects.
So effectively, virtually all of the web experienced on iOS has no inertia scrolling. That means slow and clunky scrolling, putting the web far behind native apps in perceived performance.
The Great News
The great news is that Safari 11, which comes with iOS11, will apply inertia scrolling to the entire web page by default. You don’t need to do anything to get it. If you were using the hack, you can now remove it.
The above video is an attempt to showcase this. Unfortunately, the mirroring program I use (reflector) is too slow to keep up with 60fps. So you’ll have to believe me that the scrolling is in fact super smooth and has the inertia effect.
More Great News
And there’s more great news. One other age-old frustration is that for reasons unknown, when you add a webpage to your homescreen on iOS, the rendering of that webpage will happen in a completely different engine compared to normal Safari. This much older engine has a lot of bugs that are already solved in normal Safari.
These weird differences directly undermine the strategy to build web apps over native apps and are a source of a lot of criticism towards Apple for holding back the web.
These differences are now gone. The home screen web apps are rendered in the same engine now. In fact, the video above shows such a home screen app. Combined with Apple’s promise to support service workers in the future, we have every reason to believe in a bright future for web apps. Even on iOS.
