【CSS】Safariでfilterプロパティの描写がうまくいかない場合の対処法

iOSのSafariで、filter:drop-shadowの描写が途切れたり、うまく表示されない場合があります。

今回はその対処法を記しておきます。

WordPressテーマ『SWELL』

17,600円（税込）

当ブログで使用中のテーマ「SWELL」。Webサイトのベースとしても多く利用されている投資価値No.1のテーマです。

レビュー記事はこちら購入はこちら

よく使うfilterプロパティ

filterプロパティではdrop-shadowがよく使われます。

drop-shadowは透過PNG画像などで、描写されている部分にだけ影をつけることができるため、box-shadowプロパティではできなかった表現ができるようになりました。

しかし、iOSのSafariでは、要素をアニメーションさせると影が途切れたりするんですよね。

描写がうまくいかない原因

Safariでfilterプロパティが正しく機能しない原因として、ハードウェアアクセラレーション（GPUを使ったレンダリング）の影響が考えられます。

filterプロパティは画像や要素に対してグラフィカルな効果を適用しますが、その計算が重いため、制限しているようです。

対策方法

transform: translateZ(0);やwill-change: filter;を追加して、ハードウェアアクセラレーションを強制的に有効化します。

これにより、GPUによる描画が優先され、フィルターの適用が改善されるはずです。

/* 記述例１ */
.item {
  filter: drop-shadow(10px 10px 5px #aaa);
  transform: translateZ(0);
}

/* 記述例２ */
.item {
  filter: drop-shadow(10px 10px 5px #aaa);
  will-change: filter;
}

ただし、過剰に使用するとGPUのメモリが消費され、結果的にページのパフォーマンスが低下する可能性があります。

必要最低限、アニメーションやフィルタを頻繁に使う要素に対してのみ適用するのが理想です。

具体例

See the Pen SVGテキストアニメーション by hisa (@hisaaashi) on CodePen.

この例では、will-change: filter;をつけて対策していますが、ためしにiOS端末で削除してみるとやはり影が途切れます。

気になる方は試してみてください。

filterは便利だけど難しい

新しいプロパティは便利な反面、ブラウザや端末ごとに対策が必要だったりで「はいできました！」と言うような実装は難しいですね。

最低限CSSの挙動は、足並みを揃えて欲しいところではあります。

あわせて読みたい

【CSS】独立したtranslate・rotate・scaleを別々にアニメーションさせてみる 要素を移動や回転させる際にtransformでまとめて指定していましたが、translate、rotate、scaleが独立し、個別に指定できるようになりました。 それにより、@keyframes…

おすすめWEBスクール

WEB制作やWEBデザインを学びたいなら、SNSでも話題の「デイトラ」がおすすめ！
どのコースも10万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。

＼ クリックしてジャンプ！ ／