2020年06月21日

will-change

ホームページをナナメにしたら、アニメーションgifがカクカクして、結局は止まってしまうことに悩んでいた。
これはchromeにのみ起こる。IE(Edge)やfirefoxでは発生しない。
で、gifではなくてapngではどうかとか、いっそのことyoutubeを無限ループさせたらどうかとか色々試したがどれも逆のブラウザ問題が発生したり別の問題が発生したりしてうまくいかない。
でようやくたどり着いたのが、cssプロパティの
will-change
だっ。
これはすごかった。
https://developer.mozilla.org/ja/docs/Web/CSS/will-change
CSS の will-change プロパティは、どのような要素の変更が予測されているかブラウザーに助言します。ブラウザーは要素が実際に変更される前に、最適化をセットアップすることができます。この種の最適化は、実際に変化が求められる前に、潜在的に高コストの処理を行うことで、ページの応答を向上させることができます。
ていう、ああなんてインテリジェンスなプロパティなんだろう。
今回だったらgif要素のタグに、
will-change: transform,animation;
を適用させるだけ。上記webページではanimationという値はなかったかも。他のサイトで見つけた。
これで一発解決!!でした!!(まじで)




posted by シマウマ at 10:57| Comment(0) | html-css | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。