先日Chromeブラウザがアップデートしたんですが、それを機にこれまでCSSで指定していた『blur』がなぜがおかしな動きをするようになった。
しかも、おかしな動きと言ってもblur自体が崩壊したわけではなく、Chromeブラウザ上のblurのぼかし具合が変わった？という言い方が正しいかもしれない。
ちなみに私のChromeバージョンは以下との通り。
88.0.4324.104（Official Build） （64 ビット）
最初何が原因かわからなかったため、transformをいじってみたり（ease-in-out⇒linearに変更）
していたのだが一向に改善されない。
なんならtransform消してもその現象が発生している。
で、目を付けたのがblur。
私は以下のような指定をCSSで行っていた。
1 2 3 4 5 6 7 8 9 10 11 12 | @keyframes catch { 0% { opacity: 0; filter: blur(5px); transform:translateX(-1em) ; } 100% { filter: blur(0); opacity: 1; transform:translateX(0vw) ; } } |
で、今回この「blur(5px)」っていうのがおかしい表示につながっていたみたい。
ぼかしの具合が大きいほどChromeのアップデートに対して特に問題はなかった。
例えば下記だと問題なく表示される。
1 2 3 4 5 6 7 8 9 10 11 12 | @keyframes catch { 0% { opacity: 0; filter: blur(100px); //ここのpx指定が大きいと大丈夫 transform:translateX(-1em) ; } 100% { filter: blur(0); opacity: 1; transform:translateX(0vw) ; } } |
これからまたChrome自体はアップデートされるだろうし、
5pxの場合でも勝手になおっていることを願って、一時的な対応としては
ひとまずblurの値を見直してみるといいよ！って話でした。