iOS SafariはCSSのfilterプロパティを使用すると重くなる

WEB制作
iOS SafariはCSSのfilterプロパティを使用すると重くなる

iOS SafariはCSSのfilterプロパティの処理を何故かGPUを使用せずにCPUで行います。そのため、filterプロパティを使用するとCPU使用率が高くなり、表示の乱れやレンダリング速度の低下、ブラウザが固まるなどの不具合が発生することがあります。

目次

対策

対策1. will-changeを使用する

will-changeプロパティを設定することでGPUレイヤーを作成する事ができます。

.foo {
    filter: drop-shadow(16px 16px 20px red) invert(75%);
    will-change: filter;
}

しかし、will-changeプロパティは、リソースの消費が激しいのでwill-changeプロパティを乱用することは避けましょう。

非推奨な例

*,
*::before,
*::after {
    will-change: all;
}

対策2. transformを使用する

transformプロパティを設定することでGPUレイヤーを作成する事ができます。

.foo {
    filter: drop-shadow(16px 16px 20px red) invert(75%);
    transform: translateZ(0);
}