CSS3プロパティwebkit-overflow-scroll：touch ERROR

Question

iOS 5は、iOSデバイスのハードウェアアクセラレータを使用してスクロール可能なdivのネイティブスクロールを提供する新しいプロパティ-webkit-overflow-scrolling:touchを公開しました。

私たちのサイトで開発中に実装されているとうまくいきますが、うまくいかない場合があります。 CSSの問題があるかもしれないと私は信じています。

次fiddleあなたが開発中の私たちのサイトにオーバーポップするとスクロールがオーバーフローした部分がで示されていない完璧ですが、あなたが施設タブの下になく、iOSの上で同じパネルを見つけるでしょう、それは完全に

の作業を紹介します文字通り2つに切り刻まれた絵。

http://www.golfbrowser.com/courses/mill-ride/

私は、彼らがここに放た何時間を浪費この http://www.golfbrowser.com/photo.PNG

Answer 1

@rellufが指摘したように、相対要素に3Dトランジションを適用すると、バグが修正されます。しかし、私はそれをもう少し調べて、-webkit-transform: translateZ(0px)を適用することもできます（これはgmapsのマップコンテナでGoogleが行うものです）。スクロール可能な要素の直接の子孫である相対配置要素にある必要はありません。

手動で修正が必要とされているすべての場所のリストを保持したくないのであれば、あなただけ行う可能性があります：

element { 
    -webkit-overflow-scrolling: touch; 
} 

element > * { 
    -webkit-transform: translateZ(0px); 
} 

Answer 2

を修正する方法は考えています。 -webkit-overflow-scrolling:touch div：

相対位置と絶対位置の要素は常に境界線で切り取られ、完全に欠落しています（空白を除いて）スペース）の外側にあります。静的から絶対的な位置プロパティを動的に変更すると、スクロール可能なdivビューポートの可視部分のみレンダリングされたままになります。

Answer 3

このバグを深く調査したところ、jsfiddleを作成し、Appleにバグレポートで提出しました。参照してください：iOS5 Images disappear when scrolling with webkit-overflow-scrolling: touch をあなたは

Answer 4

この非常に迷惑なバグに関する最新滞在することができますのでお早めAppleが私に返信して、私はそのトピックにそれを報告します私はまた、-webkitに問題オーバーフロースクロールを経験しました-overfow-scrollをtouchに設定すると、配置された要素に再描画の問題が発生しました。私の場合は、個々のアイテムが相対的な位置付けをしているので、子要素の位置を使用できるリストがありました。上記のiOS 5のCSSでは、ユーザーが隠れたコンテンツをスクロールすると、画面を改訂して要素を確認するまでに瞬時に遅れが生じました。それは本当に迷惑だった。幸いにも親ノードの相対位置も与えた場合、これは解決されています。

Answer 5

私もこのバグに遭遇しました。私は親要素に次のCSSを適用することによって、それを修正：

-webkit-transform: translate3d(0, 0, 0); 

は、しかし、私が触れた入力要素がビューの中央にスクロールされたときに望んでいたよりも、それはレンダリング速度が低下していることに気づいていると、他の入力要素を選択するかもしれません（Safari/iOSによる）。

Answer 6

バグはまだiOSの6に住んでいます。問題がposition: relativeに関連している場合は、JS経由でz-index: 1を一時的に設定して問題を解決することができます。私の場合は-webkit-transform: translate(...)はposition: relativeで動作しませんでした。

Answer 7

-webkit-overflow-scrolling: touchの要素内の要素がスクロールコンテナの外側の要素に対して絶対的に（またはfixed）配置されている場合、要素は1回だけレンダリングされ、要素がスクロールされると更新されません。サンプルHTML：あなたは（例えばインスペクタで）CSSプロパティを変更して再描画を強制する場合

<div class="relative-to-me"> 
    <div class="scrollable"> 
    <div class="absolutely-positioned"> 
    </div> 
    </div> 
</div> 

、あなたは要素の位置決めが正しい場所に再描画されていることがわかります。私はこれがスクロールのパフォーマンスを最適化するためのいくつかのパフォーマンス機能の結果だと思う。

この問題を解決するには、絶対配置された（または固定された）要素にwill-change: transformを設定します。

.absolutely-positioned { 
    will-change: transform; 
} 

Answer 8

私はいくつかの異なるソリューションを試しましたが、私の場合は完全には動作していないようです。

は最後に、私は方法はjQueryを使って正常に動作見つけた：あなたはタッチアップ時に

は-webkit-オーバーフロースクロールプロパティごとに適用します。 タッチダウンは、iOSのレンダリングを無効にしたときに自動：

*は、最初は私も-webkit-オーバーフロースクロールを適用しました。しかし、それはページを点滅させた。だから私はそれを離れて落とした、そして驚くほどうまく機能する！

<!-- JQuery Functions--> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript"> 

// Apply -webkit-overflow-scrolling in Every TouchEnd 
$(document).on('click touchend', function(event) { 
    $("#TestDIV").css({"-webkit-overflow-scrolling":"touch"}); 
}); 

</script> 



<!-- html Elements & Style --> 

<div id="TestDIV"> 
    <div class="Element"></div> 
    <div class="Element"></div> 
    <div class="Element"></div> 
    <div class="Element"></div> 
    <div class="Element"></div> 
</div> 

<style> 
#TestDIV{ 
    white-space: nowrap; 
    overflow-x: scroll; 
    -webkit-overflow-scrolling:touch; 
} 

#TestDIV .Element{ 
    width:300px; 
    height:300px; 

    margin: 2px; 

    background-color: gray; 

    display: inline-block; 
} 
#TestDIV .Element:nth-child(odd){ 
    background-color: whitesmoke; 
} 
</style>