【CSS】 「Safari」で「filter」の描画に不具合が出る

こんにちは、さち です。

先日、サイトを作るときに「CSS」の filter プロパティで drop-shadow（ドロップシャドウ） を使ったのですが、困った不具合に遭遇しました。

fitler を実装している「要素」に CSS の animation を追加すると、iPhone の「Safari」で表示したときに「ドロップシャドウ」の描画（レンダリング）が途切れるんです。

地味に困るので、解決していきましょう。

不具合の詳細

ソース

不具合に関係しない記述はなるべく省略し、見やすくしています。

<div id="circle"></div>

#circle {
  filter: drop-shadow(20px 20px 5px #444);
  animation: moving 2s forwards;
  border-radius: 999px;
}

@keyframes moving {
  ～省略～
}

1つの「要素」に filter と animation を同時に使っています。

結果

iPhone の「Safari」で表示すると、filter の「ドロップシャドウ」の下部分が途切れてしまいました。

PC だと正常に表示されるので、「Safari」の不具合です。

解決方法

ソース

<div id="circle"></div>

#circle {
  filter: drop-shadow(20px 20px 5px #444);
  animation: moving 2s forwards;
  border-radius: 999px;
  will-change: filter;
}

@keyframes moving {
  ～省略～
}

不具合の原因は、filter の「ドロップシャドウ」の描画が「CPU」で行われることでした。「CPU」ではアニメーションの処理が追いつかず、表示に問題が出るようです。

will-change: filter; を追加することで、filter の描画をグラフィック処理に特化した「GPU」でするように変更できます。（いわゆる「ハードウェアアクセラレーション」が行われる）

結果

iPhone の「Safari」でも、filter の「ドロップシャドウ」が正常に描画されるようになりました。