web-dev-qa-db-ja.com

iOS 9の `-webkit-overflow-scrolling：touch`と` overflow：scroll`はスクロール機能を壊します

私はWebアプリケーションを開発していますが、iFrame内にdivがあり、オーバーフローしているコンテンツを非表示にして、スクロール可能にしたいと考えています。

IOS 9のSafarで-webkit-overflow-scrolling:touch;をdivに追加すると（既にoverflow-y: scroll;が含まれているため、スクロールに滑らかな感触を与えることができますが、壊れてしまい、まったくスクロールしません。

これは既知の問題であることはわかっていますが、私のシナリオに関連する解決策は見つかりませんでした。データを送信する以上のことを行うiFrameがあり、実際にはユーザーのコンテンツが含まれています。向きは関係ありません。コンテンツは常にスクロール可能である必要があります。

ioscsssafariwebkittouch
11
Zach

overflow: autoと-webkit-overflow-scrolling: touchが含まれるdiv内の動的コンテンツでこの問題に遭遇しました。

汚い、醜い回避策：domに追加したときに、コンテンツをスクロールdivよりも大きくします。このようなもの：

<div style="overflow: auto; -webkit-overflow-scrolling: touch;">
    <div style="min-height: 101%">
        dynamic content
    </div>
</div>

私の理論では、Safariは-webkit-overflow-scrolling: touchが追加されたときにかなりの最適化を試みる（必要とする）ため、一部のタイプの動的コンテンツではニースを再生しません。

15
Christopher Camps

IOS9のwebkit-overflow-scrolling: touchでもこの問題が発生しました。デバイスまたはiOSシミュレータで再現できます。 Christopher Campsが言及しているように、それは動的コンテンツ、つまりスクロール可能なコンテナーよりも小さいコンテナーからコンテナーよりも大きいコンテンツに変化するコンテンツでのみ発生します。

この問題を示すCodePenがここにあります （クリストファーキャンプの修正を含む）。

1
Thomas Kelly

このSafariバグのもう1つのハックは、JavaScriptを使用してstyle="overflow: none"し、直後に以前の値にリセットします。

0
stracktracer