最近、Webkit エンジンのバグではないかと思われる Webkit のレンダリングの問題に遭遇しました。でも、そう言い切れる自信はありません。そこで、ここで質問して、あなたの意見を聞いてみたいと思います。
このケースを平文で説明するのは少し難しいので、ここにスニペットを用意しました: http://jsfiddle.net/2eQXa/1/
最初に、黄色の背景に赤い境界線が表示されます。これは <body> タグの背景ではなく、幅と高さが 100% の ID "backdrop" を持つ <div> です。デフォルトでは、「backdrop-no-problem」クラスにリンクしています。また、いくつかの画像を含む水平リストもあります。リストは緑色の枠で囲まれています。リスト内には、いくつかのウィキペディアのロゴが赤い点線で囲まれています。
次の 3 つのデバイスでページをテストしました。 、iPad3と呼びます）
「右」または「左」をクリックしてリストをスクロールしてみてください。かなり良い。
私の問題を再現するには、まず「Issue #1」をクリックします。これにより、背景の div が「position:absolute」から「position:fixed」に変更されます。次に、「課題 #2」をクリックします。これにより、「-webkit-backface-visibility: hidden;」が追加されます。要素に追加します (このスタイルを追加する理由は、iPad でのアニメーションがスムーズになるようにするためです)。
「左/右」をクリックしてリストをスクロールします。3 つのブラウザーすべてで奇妙な動作が見られるはずです。緑色の div は適切かつスムーズにスクロールしますが、その子要素はスクロールしません。子要素は、スクロールする親の位置と単純に「非同期」になります。動きが鈍く見えるだけでなく、動かなくなってしまうことさえありました。また、スクロール アニメーションが終了すると、子要素が間違った位置で停止します。要素を適切な場所に再描画するには、マウスを画像の上に移動する (またはタブレットでタップする) 必要があります。Chrome でさえ、この奇妙さを示しているため、Webkit の問題であると感じさせられます。
iPad3 では事態はさらに悪化しました。iPad3 では、「-webkit-backface-visibility: hidden;」を追加する必要はありません。（問題＃2）この奇妙な動作を確認してください。「position:fixed」(Issue #1) を追加するだけで十分です。奇妙なことに、jsFiddle でスニペットを表示すると、これは発生しません。興味がある場合は、ソースをペーストビンの単一のファイルに入れました。
この質問を書いているとき、背面の可視性に関するかなりの数の質問を見ました。いくつかチェックしましたが、どれも私の問題と一致しません。
アイデアや提案を歓迎します。ありがとう！
（多くのタイプミスを修正するために投稿を更新しました）