Tuesday, June 7, 2011

Why custom scrolling is still required with iOS 5 overflow:scroll

Apple just announced a bunch of improvements that would ship with mobile Safari in iOS 5. You can find most of them here. I was primarily interested in the bits about position: fixed and overflow: scroll, as I have authored my own custom scrolling code for iOS devices (and look forward to not needing it anymore).

It seems like a lot of people have gotten all excited about overflow: scroll and position: fixed, thinking that these improvements are going to make custom scrolling unnecessary. However the way that Apple has developed these features does not solve all the same problems that custom scrolling does.

Custom scrolling solves three problems.

  1. Gives the webapps a fixed elements (like top/bottom toolbars)
  2. Faster scrolling (because default safari scrolling is slower than native apps)
  3. Independent scrollable areas

Points 1 and 2 are intended to give webapps a more native feel. Great for those that believe they should be able to deliver top quality apps to their users through the web. Point 3 is the lesser thought about issue that is required for something like Gmail's two pane UI.


What issues does the new features address? Really only number 1 (giving webapps fixed elements). This can now be achieved by using position:fixed. Number 2 will still be an issue because the rest of the application will scroll by a regular webpage... maybe not a show stopper for many developers. You would think that number 3 would be solved by the new overflow:scroll support, however the overflow:scroll comes without scrollbars, or inertial momentum. In fact the only improvement for overflow:scroll seems to be that you can scroll with one finger now instead of 2.

This is quite disappointing. In the Android world, the browser has supported position:fixed as of 2.2 (Froyo), which solves issue 1. Issue 2 has never actually been an issue on Android because the browser scrolls fast by default. Issue 3 is resolved on Android in version 3.0, with the introduction of overflow:scroll. The PlayBook also supports position:fixed and overflow:scroll. This leaves Apple pretty far behind in terms of giving developers the tools they need to build rich layouts and interactions into their mobile webapps. 

No comments:

Post a Comment