Mobile/PhoneGap/Scrolling

iframes

The app originally used <iframe>s but no longer does.

Android 2.x

vertical size auto-expands to fit content ("height" attribute ignored); no scrolling within the iframe

Android 3.x, 4.x

vertical size is set by 'height' attribute; scrolling is possible within the iframe, but touch targets don't scroll with their visible incarnations (upstream bug)

iOS 4.x

vertical size is set by 'height' attribute; no scrolling within frame? or two-finger scrolling? (testme)

iOS 5.x

testme

divs

Android 2.x

overflow:auto/scroll is ignored

Android 3.x/4.x

overflow:auto/scroll works as expected

iOS 4.x

should work with two-finger scroll...?

iOS 5.x

set '-webkit-overflow-scrolling: touch' to get one-finger touch scrolling

whole document

All systems do good scrolling of the whole document, and some work with position:fixed as well. But while we can fake this on the phone view, on the tablet view we need two side-by-side scrollable panels.

Falling back to use 'iscroll' library or similar on Android 2.x tablets may work well enough. Pretty darn slow in my last testing for actual content though.

Consider a fallback that uses iscroll on the sidebar...?