ios - Webkit overflow scrolling touch CSS bug on iPad

Question

If you visit this page on your iPad device on the latest version of iOS you can follow along.

http://fiddle.jshell.net/will/8VJ58/10/show/light/

I have two elements with the new -webkit-overflow-scrolling: touch; property and value applied. The left hand grey area has plenty of content and will scroll in portrait or landscape. The right will only scroll in landscape.

If you start in landscape (refresh in landscape) you can scroll both areas with the inertia scrolling. Works great. Now flip your iPad into portrait and only the left hand area will scroll. This is as intended. But when you flip back to landscape the right hand area will no longer scroll at all, whereas the left hand area is fine still.

It's obvious how to stop this happening, but I don't always have the content to fill the area.

So any ideas?

Thanks in advance,
Will :)

Answer 1

Coming late with a similar, but simpler solution.

var $el = $('.myElementClass');

function setOverflow(){
    $el.css({webkitOverflowScrolling: 'touch', overflow: 'auto'});
}

function resizeHandler(){
    $el.css({webkitOverflowScrolling: 'auto', overflow: 'hidden'});
    setTimeout(setOverflow,10);
}

[EDIT] Watch out, after experimenting (a lot), I found out that display:none declarations will surely break the webkit-overflow-scrolling: touch feature. Never use it on elements (or parents of elements) that are supposed to support touch scrolling.