ブラウザ(Chrome)のフレームレート(fps)低下について

実現したいこと

CSSでアニメーションを実装したWebページがあります。
主に無限に続く背景のスクロールや、装飾の回転アニメーションになります。
実装した当時は気にならなかったのですが、最近確認してみると
ページを開いた直後は60fps出ているのに、徐々にfpsが下がり
20秒後くらいには10fps前後になります。
かなりカクついて見えるため、可能であればページを開いている間
fpsをキープする方法がないか知りたいです。

前提

ほぼ全てbackground-positionやtransform,transitionなどの
CSSアニメーション要素で動かしています。
ページ内で動いている要素は6つ程度あるためそれなりに負荷はかかると思いますが
will-changeなどでページ先頭付近にあるものだけ適宜調整し
開いた直後の負荷は低スペックマシンでも動かせる程度に調整しています。
GPUメモリ使用量はページ全体で20MBほどです。

試したこと

  • will-changeの付与、取り外し
  • transform:translate-z(0)の付与

例えばですが、GSAPなどのアニメーションに置き換えることで
解決するような問題なのでしょうか?

コメントを投稿

0 コメント