CSS overflow:auto is often the little pinch of pixy dust that transforms a web page into a web app and support amongst popular mobile browsers for overflow scrolling is pretty good:
| Browser | Overflow scroll |
|---|---|
| Android Browser | Yes |
| Blackberry Browser | Yes |
| Chrome for Mobile | Yes |
| Firefox Mobile | Yes |
| IE Mobile | Yes |
| Opera Mini | No |
| Opera Mobile | Kinda |
| Safari | Yes |
Android Browser
Android Browser supported overflow scrolling from Android 3.0. Unfortunately there are still a lot of 2.x devices out there so a polyfill like Overthrow is recommended.
Blackberry Browser
Blackberry Browser 6 or higher support overflow scrolling but momentum scrolling doesn’t make an appearance until Blackberry Browser 7.
Internet Explorer Mobile
IE Mobile 9 or higher support overflow scrolling but momentum scrolling doesn’t make an appearance until IE Mobile 10. Thanks to Tomomi Imura for confirming this.
Opera Mini
Come on, you didn’t expect overflow scrolling to work on Opera Mini did you? If you plan to support the 168 million Opera Mini users out there, be smart with your app design and use of overflow. Usually a tweak in positioning is all that’s required.
Opera Mobile
Element height (or width) alone is not enough to get Opera Mobile 12 to overflow an element and it will expand elements unless absolutely positioned with top and bottom values. This sucks but when absolutely positioned, Opera Mobile 12 does add a scrollbar to overflow elements but there is no support for touch gesture scrolling and the scrollbar controls are flaky.
Safari
iOS 4 or lower required an esoteric two finger gesture to scroll elements but normality was achieved from iOS 5. Unlike other browsers, while overflow:auto works, momentum scrolling is disabled unless you also add -webkit-overflow-scrolling: touch.
When things get wobbly
With the exception of Safari and Opera Mobile, there are no scroll indicators.
You might be thinking you’ll just use your mad JavaScript skills and build your own scroll indicator which is when things get really wobbly.
When things get really wobbly
Put simply, Android Browser on Android 4.0 or earlier and Safari do not update element positions during momentum scrolling. Android Browser is even flakier, requiring users to tap inside the overflow element before updating element positions.
The workaround for Safari is to disable momentum scrolling by removing -webkit-overflow-scrolling: touch but that’s just nasty.
Update: Good news everyone, newer versions of Safari update element positions during momentum scrolling.