CSSのfilterがiOSで描画されない

CSSのfilterでdrop-shadowの設定を行った際、iOS端末で影が一部しか表示されないということがあったので、対応方法をメモ。

サンプルコード

まずはうまく表示されなかった例です。

<a class="card" href="#">
  <div class="card_img">
    <img src="img.jpg">
  </div>
  <div class="card_body">
    <h3 class="card_title">サンプル</h3>
  </div>
</a>

カードのコンポーネントで、全体を角丸にして影を設定しています。

.card {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	color: #000;
	text-decoration: none;
	background-color: #fff;
	filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.2));
}

対応前のデモページ
iOS端末で確認すると、以下のように右下の一部のみ影が表示されました。

対応方法

原因としてはiOSでの描画周りの問題のようです。
対応方法としてはいくつかありますが、transform: translate3d(0, 0, 0) や will-change: filter を付与すると解消されます。

.card {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	color: #000;
	text-decoration: none;
	background-color: #fff;
	filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.2));
	transform: translate3d(0, 0, 0);
}

translate3d(0, 0, 0) を設定するデモページ

次に will-change: filter を付与した場合です。

.card {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	color: #000;
	text-decoration: none;
	background-color: #fff;
	filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.2));
	will-change: filter;
}

will-change: filter を設定するデモページ

もしくは、今回の場合filterでbox-shadow を使用しているので、そもそもbox-shadowプロパティを使うように変更することでも解消できます。

.card {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	color: #000;
	text-decoration: none;
	background-color: #fff;
	box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}

box-shadow を使用するデモページ

あるいは、今回の場合は filterと合わせてoverflow: hidden を設定していると表示がうまくいかなくなるようでした。
そのため、.cardから overflow: hidden を外した上で、画像に対して border-radius と overflow を設定する形でも解消できました。

.card {
	display: block;
	border-radius: 16px;
	color: #000;
	text-decoration: none;
	background-color: #fff;
	filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.2));
}
.card_img {
	border-radius: 16px 16px 0 0;
	overflow: hidden;
}

overflow: hidden を外すデモページ