Overflow Scrolling on Android doesn't work?

Question

yupp, I'm one of these guys who want to develop mobile apps with HTML5. On Android and iOS. Sounds crazy I know. Sadly I have a problem...

I have a classic app with a footer and header and a content which should be scrollable. On iOS this works fantastic! The header and footer have "position: fixed" to top/bottom and the content uses native scrolling momentum with "-webkit-overflow-scrolling: touch;". I know that "-webkit-overflow-scrolling: touch;" isn't available on Android, but this property is not only ignored, scrolling doesn't work at all!

So please can anyone tell me how to get "native" scrolling on iOS and "good" scrolling on Android with the same markup and style? E.g. if I can use native scrolling with momentum - great, if not - plain scrolling.

Note: I only need to support recent versions for now (no Android 2.3!), so I don't want JS-Fallbacks like iScroll 4.

.content {
    // no(!) scrolling on Android - why?
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

JSFiddle: http://jsfiddle.net/bmJxN/

Thanks!

Answer 1

Sorry for digging up an old post but as there seem to be no satisfying answer I thought I would add my 2cents for anybody ending up here like me.

Talking about the general problem of scrolling in mobile WebApps, scrolling & momentum on mobile browsers are a pain as there is a wide variety of different implementations depending on the platform : Android browser != Chrome != Safari != opera etc, and Android < 3 does not support scrolling as well as newer versions, just like iOS < 5.

The situation is complicated, and may mot be a problem for iOS where most devices are on iOS 5 or 6, but it is a real problem with Android fragmentation.

To get a better grasp at this, you could read this.

To respond to this, as you have already pointed out, there are fallbacks such as iScroll or more recently, Overthrow that you may handle better the native implems and JS fallbacks. More recently, the Financial Times team published the FTScroller library that looks also promising.

Now for your situation, if you only want to support Android 4+ & iOS5+, you should be able to make it work both with momentum using only fixed positioning and

overflow: auto;
-webkit-overflow-scrolling: touch;

on your scrollable content (you don't need to specify "overflow-x:hidden" if using auto property). If not, you may have made a mistake in your fixed positing or some other css layout property ? (inherited body props etc).

UPDATE : I should have done this before posting my answer, but I just tested the fiddle on my Nexus4 and your code does work in Chrome : which probably mean that you tested on an older device without Android 4+ or with a browser that did no support the overflow property ?

Side notes :

• please notice that while the momentum effect is active by default on android & iOS, it's the platform specific momentum that will be applied : they differ from one another, contrary to a JS polyfill that makes scrolling momentum platform-independent. Also, on iOS, scrolling is much smoother than an Android, even though the situation got better with newer devices and Android 4.0+ (it was painfully unusable in most heavy populated views before that).
• On iOS, you will have the bouncing effect native to the platform, but not on Android as the native browser UX does not include this bouncing effect (which is weird because this effect exists in other parts of the OS UX, such as settings). You could achieve this on Android with a library, but beware of the uncanny valley.
• Other problems exists even on newer browsers, such as the absence of a scrolling position indicator in Android browsers as pointed out here : http://barrow.io/overflow-scrolling. On iOS, you may have a problem with the infamous "rubber band scrolling effect" on your whole page while having scrolling inside specific elements as pointed out in "How to disable rubber band in iOS web apps?". You will have a similar pb for WP8 webApps.

All this to say that something as simple as scrolling is far from perfect in mobile WebApps, and it's even worse in WebViews performance-wise (when developing PhoneGap apps for example). Good luck !