【CSS】Chromeでtransitionとblurをかけるとチラつくバグを解消する

  • HOME
  • blog
  • WEB構築
  • 【CSS】Chromeでtransitionとblurをかけるとチラつくバグを解消する

2021/2/12 追記:
Chrome側の設定でも解消できることが判明しました。

【Chrome】Chromeで閲覧するとチラつくバグを解消する(ユーザー設定編)

ただしこれはユーザー依存ですので、制作サイドの方は現在のページを最後まで読んでいただければと思います。

cssのfilter:blurを、transitionで時間をかけて表示させたところ、
Chromeでチラつくというか、ズレるというか、一瞬ジャギジャギの状態が現れて元の形に収まる……
というバグに遭遇しました。
Chromeのアップデートに伴って起こりはじめたので、何か関係があるのかもしれません。

以下再現です。
Chromeでなんとなくぼやけている箇所にマウスオーバーしてみてください。
マウスオーバーして、ラストの直前でビクンとチラつくと思います。

See the Pen chrome blur effect Bug by casyan (@d-casyan) on CodePen.

 

Chromeはtrantisionと相性が悪い?

調査したところChromeはtransitionとの相性が悪いのか、以前からバグを起こしていたらしいです。
またそれを解消できる一つの手段として
「backface-visibility: hidden;」
「perspective: 1000;」
を追加する

……と、ありますが、これでも解消されることはありませんでした。

See the Pen chrome blur effect Bug – 2 by casyan (@d-casyan) on CodePen.

blurの値を変更してみた

しかし調査ではblurについての記載はあまり見かけませんでした。
どちらかというとscaleだとかopacityだけの話が多かったです。

そこで、blurの最後、0の設定をいじってどの時点でチラつくのか検証してみることに。

  filter: blur(0.5px);

px指定なのに0.5!?となるとは思いますが、
transition無しに、この数値を1から徐々にコンマレベルで0にしてみます。
すると……

See the Pen chrome blur effect Bug – 3 by casyan (@d-casyan) on CodePen.

グワアアアアアアアアッ!!バ、バグ!!

恐ろしいことにビクつくどころか上下の文字と重なっています。いや、もはや何?上下……の、文字?え?
つまりチラつきのときに太文字にも見えたりするのは重なっているからなのでしょうか?

blurのチラつきを解消する

一体どうすれば……と悩んでしまいそうになりますが、
よく見ると、0.04pxであればギリギリぼやけておらず、かつ重なりもありません。
これを利用して以下のように、0ではなく0.04pxに設定します。

See the Pen chrome blur effect Bug – 4 by casyan (@d-casyan) on CodePen.

いかがでしょう!チラつかず、カクつかず、ジャギらず、ズレず、ビクつきません!
これならいける!!

一方その頃のsafari

やはりpx指定というのは整数で扱うというのが通常です。
safariなどでは1扱いになってしまうのでしょう。

モウヤダ……

Chromeだけに効くようにする

というわけで0.04指定はChromeだけに効いてもらうことにします。

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
  /*ここにChromeだけに効かせたいCSS*/
}

これでChromeだけに効くようになります。

よく見かける
@media screen and (-webkit-min-device-pixel-ratio: 0) {
だけの記述は、Chromeもsafariも元は同じwebkitで動いているので同じ結果になります。
注意です。

結果

blurは0pxとする。Chromeのみ0.04pxとする。

See the Pen chrome blur effect Bug – 5 by casyan (@d-casyan) on CodePen.

これでChromeは0.04pxで止まるように、それ以外は0になるようにできました!

初めの数値を大きくすることでも解消される

こちらの例でははじめのpx数を100pxなど大きくしておくことで目立たなくなったとのことです。

参考ページ

関連記事

【Chrome】Chromeで閲覧するとチラつくバグを解消する(ユーザー設定編)

前回、制作者の立場からChromeのバグを解消するための方法を記載しました。 【CSS】Chromeでtransitionとblurをかけるとチラつくバグを解消...

お気軽にお問い合わせください。名古屋近郊の打合せもご相談ください。