Overflow scrolling


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:

BrowserOverflow 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.

Opera Mobile 12 overflow test
Opera Mobile overflow


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.

Safari overflow test Android Browser overflow test
Safari scroll indicator and Android Browser’s lack to them

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.