backdrop-filter が iOS だと効かない問題

概要

backdrop-filter プロパティは、背景のぼかしやカラーシフトなどの視覚効果を適用するために用いられます。今回は会員登録しているユーザーにのみコンテンツを表示し、その他のユーザーにはそのコンテンツをぼかして表示するという機能を実装するのに用いました。しかし、iOS で確認したときにぼかしが効かないという問題が発生しました。

原因

iOS では、backdrop-filter プロパティがサポートされているバージョンとされていないバージョンがあります。特に、古いバージョンの iOS では、このプロパティが正しく機能しません。

対処法

こちらの問題に対処するには、ベンダープレフィックスが必要でした。-webkit- プレフィックスを追加すると、iOS でもぼかしが効くようになりました。

.box {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

参照