8

HTML5を使用してIOS用のモバイルアプリを構築しています。「-webkit-overflow-scrolling: touch」を使用してネイティブの慣性スクロールを取得していますが、非常にバグがあります。スクロールが停止するまでコンテンツがレンダリングされない問題は解決しましたが、永続的なバグの 1 つが次のとおりです。

上下にスクロールしようとすると何も起こりませんが、水平方向にスクロールしようとすると、コンテンツが垂直方向(軸から 90 度) スクロールします。アプリ内を移動してページに戻ると、修正されることがあります。また、コンテンツがいっぱいなのに、まったくスクロールしないこともあります。

私がググったところによると、Apple はこのバグを認識しており、すぐに修正するつもりはないというのがコンセンサスのようです。-webkit-overflow-scrolling を正しく動作させるための解決策を見つけた人はいますか?

4

3 に答える 3

6

私もこのバグに何ヶ月も苦労しました。私が見つけた最高の特徴は次のとおりです。

https://bugs.webkit.org/show_bug.cgi?id=87391

これは、ページに iFrame があり、コンテンツが Javascript から設定されている場合に発生することを示しています。The Graphics Codex バージョン 1.6での現在の回避策は、タッチ スクロールを使用するのではなく、iScroll4 を使用してページを明示的にスクロールすることです。Javascript はシングル スレッドであるため、アニメーションやバックグラウンドでのコンテンツの読み込みも実行している場合、これは遅くなる可能性があります。

于 2012-11-11T03:00:18.770 に答える
2

同じ問題が発生しました。それを使用-webkit-overflow-scrolling: scrollしているノードは、左右のスクロールジェスチャでのみ断続的に上下にスクロールします。

考えられる原因は次のとおりです。

  • 表示されているかどうかに関係なく、ページのどこにでも存在するiframe（ソース）
  • visibility: hiddenスクロール可能なノード（ソース）の任意の親に適用されます

ただし、これらの状況はいずれも私のWebアプリには存在しませんでした。<ul>私が書いた純粋なCSSモーダルダイアログの中にスクロール可能なものがあり、それは巧妙なトリックを使用して透明なアンダーレイ（。を含む::after疑似要素）を追加しましたposition: fixed。

position: fixed疑似要素からを削除すると、問題は解決しました。もちろん、これは私の巧妙なトリックを役に立たなくしましたが、このバグがこの状況によって引き起こされる可能性があることを知ることは興味深いことでした。

デバイス： 2012 iPad3上のiOS5.1.1（網膜）

問題のあるコード：

/* Underlay */
.dialog::after {
    z-index: -1;
    position: fixed; /* <--- This was the problem! */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-color: rgba(0,0,0,0.4);

    content: "";
}

tl; dr：含まれている要素に固定位置の疑似要素がある場合、それを削除するとスクロールの問題が修正される可能性があります。

于 2012-11-15T03:30:30.303 に答える
0

問題が古いことはわかっていますが、Web サイトを iOS 5 で動作させる必要がありました。残念ながら、iframe を削除または置換することはできませんでした。スムーズにスクロールするように構成された要素の前にレンダリングされた場合にのみ、iframe の存在が問題を引き起こすことに気付きました。後でドキュメントにiframeを追加すると（-webkit-overflow-scrolling: touchの要素の後）、問題が修正されました:)

于 2013-11-23T21:36:38.883 に答える