requestAnimationFrameを使用して視差スクロールを行うサイトを構築しています。複数のセクションがあり、それぞれにフルサイズの背景画像といくつかの中景および前景画像があります。requestAnimationFrameを使用して、これを比較的スムーズにアニメーション化することができましたが、アニメーションにはまだ時折ジッターがあります。
Chromeのタイムラインをフレームモードで見ると、「ジャンク」の原因となっているプロセスに「画像デコード」というラベルが付いていることがわかります。さらに、アニメーションが1回完了すると、ジャンクは再発しません。
現在、ほとんどのブラウザは、まだ表示されていない画像のデコードを延期しているようです。画像をユーザーに表示せずに（プリロードするだけでなく）プリデコードする方法はありますか？
この問題は、画像がスクロールアウト/ビューに表示されていることに関連している可能性があります。
http://creativejs.com/resources/requestanimationframe/から
また、ブラウザーは、負荷、要素の可視性（スクロールして表示されない）、およびバッテリーの状態に基づいて、requestAnimationFrameのパフォーマンスを最適化することを選択できることも示唆されています。
W3Cドラフトからも
問題-4要素がrequestAnimationFrameに渡されることを許可して、特定の要素に影響を与えるアニメーションが、スクロールして表示されなくなったときに抑制または一時停止されるようにしますか？
問題が発生する可能性があるため、各onscrollイベントに対してrequestAnimationFrameループを開始していないことを確認してください。これについては、この別の投稿で詳しく説明されています
これを解決するために、要素が画面に表示されているかどうかをチェックする行を削除しました。これは、ブラウザーと同じことをしている可能性がありますが、不十分でした。