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の値を見直してみるといいよ!って話でした。