[解決済み] iPad Safariのスクロールにより、HTML要素が消えて、遅れて再表示される

質問

現在、iPadのSafariに対応したHTML5とjQueryを使ったWebアプリケーションを開発しています。スクロール領域が大きいため、画面外にある要素までスクロールすると、遅れて表示されてしまうという問題に遭遇しています。

どういうことかというと、画面外にある画像の列（あるいはグラデーションのついたdiv）がある場合、そこにスクロールダウン（あるいはアップ）したときに 期待される動作 は、私がその要素にスクロールしているときに、その要素が画面に表示されることです。

しかし は表示されません。 画面から指を離し、スクローラーがすべてのアニメーションを終了するまで。

これは私にとって超目立つ問題を引き起こしており、全体が途切れ途切れになっているように見えますが、そうではないのです。iPadのSafariは、メモリを節約するために何かしようとしているのだと思います。このカクツキを防ぐ方法はありますか？

また、iPad Safariは実際に何をしようとしているのでしょうか？

解決するには？

私は トランスレート3d 以前は それは望ましくない結果を生み出しました。基本的に、それは切り落とされ レンダリングしない の要素は、私が操作するまで画面外にありました。つまり、基本的に横向きでは、画面外にある私のサイトの半分が表示されていなかったのです。これはiPad用のウェブアプリケーションで、そのために私は困っていました。

適用 トランスレート3d を相対的に配置された要素に適用すると、それらの要素については問題が解決しましたが、その他の要素については、画面外に出るとレンダリングが停止してしまいました。対話できない要素（アートワーク）は、ページを再読み込みしない限り、二度とレンダリングされないのです。

完全な解決策です。

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

さて、これは最も効率的な解決策ではないかもしれませんが、唯一うまくいく方法でした。モバイルSafariは、画面外にある要素をレンダリングしません。 -webkit-overflow-scrolling: touch . がない限り トランスレート3d が適用されている場合、スクロールによって画面外に出る可能性のある他のすべての要素は、スクロール後に切り落とされます。

<サブ (これが私の質問に対する完全な答えです。私はもともと Colin Williamsの回答 を正解とし、完全な解答にたどり着くことができました。コミュニティメンバーの@Slipp D. Thompsonは、私が質問してから約2年半後に私の質問を編集し、私がSOのQ &A形式を乱用していると告げました。また、この質問を回答として別途掲載するように言われました。 @Colin Williamsさん、ありがとうございます。この回答とリンク先の記事から、CSSで何かやってみようと思うきっかけになりました。そして、これが他の迷える人々の助けになることを願っています。これは確かに私を大いに助けてくれました！)