ChromeがアップデートしてなんだかCSSのblurの動きがおかしい

先日Chromeブラウザがアップデートしたんですが、それを機にこれまでCSSで指定していた『blur』がなぜがおかしな動きをするようになった。
しかも、おかしな動きと言ってもblur自体が崩壊したわけではなく、Chromeブラウザ上のblurのぼかし具合が変わった？という言い方が正しいかもしれない。

ちなみに私のChromeバージョンは以下との通り。
88.0.4324.104（Official Build） （64 ビット）

最初何が原因かわからなかったため、transformをいじってみたり（ease-in-out⇒linearに変更）
していたのだが一向に改善されない。
なんならtransform消してもその現象が発生している。

で、目を付けたのがblur。
私は以下のような指定をCSSで行っていた。

@keyframes catch {
      0% {
        opacity: 0;
        filter: blur(5px);
        transform:translateX(-1em) ;
      }
      100% {
        filter: blur(0);
        opacity: 1;
        transform:translateX(0vw) ;
      }
    }

で、今回この「blur(5px)」っていうのがおかしい表示につながっていたみたい。
ぼかしの具合が大きいほどChromeのアップデートに対して特に問題はなかった。

例えば下記だと問題なく表示される。

@keyframes catch {
      0% {
        opacity: 0;
        filter: blur(100px);　//ここのpx指定が大きいと大丈夫
        transform:translateX(-1em) ;
      }
      100% {
        filter: blur(0);
        opacity: 1;
        transform:translateX(0vw) ;
      }
    }

これからまたChrome自体はアップデートされるだろうし、
5pxの場合でも勝手になおっていることを願って、一時的な対応としては
ひとまずblurの値を見直してみるといいよ！って話でした。

Share: