web-dev-qa-db-ja.com

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

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

開発中のサイトに実装すると、機能しますがうまくいきません。 CSSの問題があるかもしれないと思うので、ここで質問します。

次の fiddle は完全に機能することを示します

開発中のサイトにアクセスすると、ファシリティタブの下に同じパネルが表示されますが、iOSではスクロールは完璧ですが、文字通り2つに切り刻まれた画像ではオーバーフローしたセクションは表示されません。

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

これを修正する方法がわかりません http://www.golfbrowser.com/photo.PNG

css3webkitoverflowios5
58
Robin Knight

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

したがって、修正が必要なすべての場所のリストを手動で保持したくない場合は、次のようにします。

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

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

彼らはここで放すなんて盗品だ。要素が-webkit-overflow-scrolling:touch div：position: staticで適切にレンダリングされるために必要な唯一のプロパティがようやく見つかるまで、あらゆる回避策を試しました。

相対および絶対配置された要素は、境界で常に切り取られ、その外側では完全に失われます（空のスペースを除く）。 positionプロパティを静的から絶対に動的に変更すると、スクロール可能なdivビューポートの表示部分のみがレンダリングされたままになり、オフセットが発生します。

16
user1012566

私もこのバグに遭遇しました。次のCSSを親要素に適用することで修正しました。

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

ただし、タッチの入力要素が（Safari/iOSによって）ビューの中央にスクロールされると、レンダリングが遅くなり、必要以外の入力要素が選択される可能性があることに気付きました。

6
relluf

IOSでは、-webkit-overflow-scrolling: touchが設定された要素内の要素がスクロールコンテナの外部の要素に対して絶対（またはfixed）に配置されている場合、要素は一度だけレンダリングされ、レンダリングは更新されません。要素がスクロールされるとき。サンプルHTML：

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

CSSプロパティを変更して（たとえばインスペクターで）強制的に再レン​​ダリングすると、要素の位置が正しい場所に再レンダリングされることがわかります。これは、スクロールのパフォーマンスを最適化するためのパフォーマンス機能の結果であると思われます。

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

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

このバグを詳細に調査し、jsfiddleを作成してバグレポートでAppleに送信しました。参照してください。 webkit-overflow-scrollingでスクロールするとiOS5画像が消えます：touch Apple私に返信したらすぐに、その非常に迷惑なバグについて最新の状態を保つことができるように、そのトピックについて報告します。

2
lucaferrario

また、-webkit-overlfow-scrollingをtouchに設定してオーバーフロースクロールを行うと、配置された要素で再描画の問題が発生するという問題も発生しました。私の場合、個々のアイテムに相対的な位置付けがあるリストがあり、子要素で位置付けを使用できました。 iOS 5の上記のCSSでは、ユーザーが非表示のコンテンツをスクロールして表示すると、要素を確認するために画面を再描画するまでに少しの遅延がありました。本当に迷惑でした。幸いなことに、親ノードに相対的な位置を与えた場合、これが解決されたことを発見しました。

1
Robert

バグはまだiOS 6に存在します。問題が_position: relative_に関連している場合、JSを介して一時的に_z-index: 1_を設定することで問題を解決できる場合があります。私の場合、-webkit-transform: translate(...)は_position: relative_では機能しませんでした。

1
Bernd

私はいくつかの異なる解決策を試しましたが、私の場合は完全に機能しないようでした。

最後に、jQueryでうまく機能する方法を見つけました。

タッチアップするたびに-webkit-overflow-scrollingプロパティを適用します。

*最初に私も適用しました-webkit-overflow-scrolling：auto when TouchDown、iOSレンダリングを無効にします。しかし、ページを点滅させました。だから私はそれを捨てて、驚くほどうまくいきました！

以下の行を確認してください。

<!-- ???? 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>
0
Corxit Sun