CSSのfilter:blur()をうまく利用する

Can I use... Support tables for HTML5, CSS3, etc

CSS3のfilterプロパティがほとんどのブラウザでサポートされていたので下記のようなマウスオーバーした画像を全体の背景にして切替時にfadeInするような実装をした。

背景画像はCSSの filter:blur(40px); でボケボケにする。

当初このような実装をしていたのだが、大画面でblurさせた要素にopacityのアニメーションをかけると will-change: opacity; の甲斐も虚しくFirefox49ではカクつきが発生してしまっていた。

詳しくみてみるとFirefoxはアニメーション最中にFPSが最低の5.63fpsまで低下しており、filter: blur(10px); だと7.79fps、全くつけない状態だとアニメーション中fpsは20前後となった。 描画面積は1200*680でmacOS Sierra i7/2.5GHz/16GB検証

filter: blur(40px);

filter: blur(10px);

filter: blur(0);

opacityはComposite layerで処理されるはずだが、それでもカクつきが起こっている状態が治らないので別のアプローチで解決方法を考えることにした。

Chromeなんかは逆にこの辺の挙動がいいかんじである。

上記の通り根本的な原因はblurのかけ過ぎにあったので、blurを極限まで弱くかつwidthを縮小し、transform: scale(4); で拡大し似たような見た目にすることにした。

改良版

See the Pen wzYWvd by aun343 (@aun343) on CodePen.

See the Pen wzYWvd by aun343 (@aun343) on CodePen.

filter: blur(8px); transform: scale(3);

24fps位は出ており、見た目もほぼ気にならないのでいいのではないかと思っている。