CSSアニメーションを実装する上で気を付けたいパフォーマンスの話し - Qiitaはじめに Safariで、css filter(blur)をかけるとなぜか表示されなかったので対処法を書きます。 理由としては要素にハードウェアアクセラレーションが効いていないことが原因で、 要素にGPUレイヤーを作成すれば大丈夫なので、GPUレイヤーを作成するようSafariに促します。 対策1. will-changeプロパティを使う will-changeプロパティを設定することでGPUレイヤーを作成する事ができます。 .lp_hero__main::before, .lp_hero__main::after { filter: blur(100px); will-change: filter; } 実装後（after）の画像ではちゃんと薄い青色のブラーが適用されているのが確認できます。 なぜ、will-change・transformを設定することで解決できたのか。 「はじめに」で
