WebkitオーバーフロースクロールタッチiPad上のCSSバグ

Question

iOSの最新バージョンのiPadデバイスでこのページにアクセスすると、それに沿って操作できます。

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

私は、新しい-webkit-オーバーフロースクロールを持つ2つの要素があります：タッチし;プロパティと値が適用されます。左の灰色の領域には内容が豊富にあり、縦または横にスクロールします。右はスクロールでのみスクロールします。

風景で表示する（風景をリフレッシュする）と、慣性スクロールで両方の領域をスクロールできます。よく働く。 iPadを縦向きにして、左手部分だけをスクロールします。これは意図通りです。しかし、あなたが景色に戻ってくると、右手の領域はもはや全くスクロールされませんが、左手の領域はまだまだ精細です。

これをやり遂げる方法は明らかですが、私はいつもその領域を埋めるためのコンテンツを持っているとは限りません。

だからアイデアはありますか？

おかげで、事前に、
は、私が実際に正確に同じ問題を抱えてい

Answer 1

:)ます。私は、オリエンテーションが変更されたときにコンテンツがもはやスクロールする必要がないDIVに影響を与えるという事実に絞り込んだ。

あなたの例では、右のDIVは横向きにスクロールし、縦向きにスクロールする必要はありませんが、再度スクロールする必要があります。私は両方のDIV（左右）が向きに関係なくスクロールする必要があり、問題ではない場合にこれをテストしました。

更新日：

実際これを修正したようです。

問題はタイミングの問題であるようです。サイズ変更の際、内側のコンテンツは、オーバーフローした外側のDIVのスクロールを保証するのに十分な大きさではありません。この日を無駄にした後、私は最終的に、このハックを思い付いた：ページのサイズが変更するたびに

<div id="header" style="position:fixed; height:100px">Header</div> 
<div id="content" style="overflow: auto; -webkit-overflow-scrolling: touch"> 
    <div id="contentInner"> 
     content that is not long enough to always scroll during different orientations 
    </div> 
</div> 

はここに私のロジックです：

function handleResize() 
    { 
     var iHeight = $(window).height() - $("#header").height(); 

     // Height needs to be set, to allow for scrolling - 
     //this is the fixed container that will scroll 
     $('#content').height(iHeight - 10); 

     // Temporarily blow out the inner content, to FORCE ipad to scroll during resizing 
     // This is a timing issue where the inner content is not big enough during resize post orientation to require the outer DIV to scroll 
     $('#contentInner').height(1000); 

     // Set the heights back to something normal 
     // We have to "pause" long enough for the re-orientation resize to finish 
     window.setTimeout(delayFix, 10); 
} 

function delayFix() 
{ 
    var iHeight = $(window).height() - $("#header").height(); 

    // Inner divs force the outer div to always have at least something to scroll. This makes the inner DIV always "rubber-band" and prevents 
    // the page from scrolling all over the place for no reason. 
    // The height of the inner guy needs to be AT LEAST as big as the container and actually a nip bigger to cause the 
    // scrollable area to 'rubber band' properly 
    $('#contentInner').height(iHeight + 20); 

} 

Answer 2

類似して遅刻

が、簡単なソリューション。

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

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

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

[EDIT] はを付けろ、（たくさん）を試した後、私が見つけたそのdisplay:none宣言きっとブレークwebkit-overflow-scrolling: touch機能。 タッチ・スクロールをサポートするはずの要素（または要素の親）では使用しないでください。

Answer 3

iPhone、iPod、iPadで同じバグが発生しました。これは後者のみに限定されない。

私は解決策であることが示唆されたすべてのものを試してみましたが、最終的には甘い組み合わせは、要素を取り外し、そのコンテナに追加し、これをやっている間、明示的に独自の高さを割り当てることになったので、のように：

$(window).on('orientationchange', function(){ 
    var el = $('.troublemaker').detach(), 
     elh = el.height(); 
    setTimeout(el.css({'height':elh+'px'}).appendTo('.container'), 50); 
}); 

Answer 4

既知の「修正」を使用して、iOS6の再描画でsetTimeoutを使用せずにこの問題を修正できるようにしました。