iOSでbackdrop-filterを使うときはベンダープレフィックスを付与するべし 📱

CSSで擦りガラス越しに見ているようなエフェクトをかけたい際、backdrop-filterを使うといい感じに実装できます。

DEMO

ソースコード（抜粋）

CSS

.backdrop-filter {
  backdrop-filter: blur(4px);
}

しかし、現状ではSafariで使用するにはベンダープレフィックスが必要です。（iOS 16.6で確認）

developer.mozilla.org

DEMO

ソースコード（抜粋）

CSS

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

先日、backdrop-filterを使ったNext.jsのプロジェクトを見返したところ、iPhoneで観覧した際に効いていないことに気づき、ベンダープレフィックスが必要なことに気づきました。
以前は、iOSで効いていた気がするのですが、Autoprefixerが効いていたのかもしれません。