よくある原因
チェックリストで最初に確認すべきはプレフィックスです。`backdrop-filter`のみで`-webkit-backdrop-filter`がない場合、Safari 15.3以前では効きません。AI生成HTMLはプレフィックスを付けないことが多く、確認せずに公開するとSafariユーザーにはぼかし効果が見えない状態になります。
次に確認するのは親要素のCSSです。backdrop-filterを適用する要素の祖先要素のいずれかに`overflow: hidden`があると、Safariではぼかしが機能しません。DevToolsで対象要素を選択し、親を遡りながらoverflowプロパティを確認するのが確実です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
チェック手順：(1)CSSで`backdrop-filter`を検索し、`-webkit-backdrop-filter`が同じ値で隣接行にあるか確認。(2)対象要素の親チェーンにoverflowが設定されていないか確認。(3)対象要素にposition: relative（またはabsolute・fixed・sticky）が設定されているか確認。(4)Safariで実際に表示して効果が出ているか目視確認。
Safariがない場合はChrome DevToolsで代替確認できます。`Rendering`タブを開き「Emulate CSS media feature」を使ってもSafari固有のバグは再現しないため、最終的にはSafariかiOS実機での確認が必要です。ギガサイト便でURLを発行してiPhoneのSafariで開く方法が手軽です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
相手から「フロストガラス効果が見えない」「背景がぼけていない」と言われたら、まずSafariのバージョンを確認してもらいます。`Safari→About Safari`でバージョンが見れ、15.4以降であればプレフィックスなしで動作するはずなので、別の原因（overflow・z-index等）を調査します。
相手がiPhoneを使っている場合、「設定→一般→情報→iOSバージョン」を確認してもらいます。iOS 14以前のSafariはbackdrop-filterのサポートが不安定です。その場合はflallbackとして`background-color: rgba(255,255,255,0.7)`を追記し、ぼかしが効かなくても半透明背景で近い見た目になるよう対応しておくことを検討します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
今後backdrop-filterを使うHTMLは、CSSの書き方を必ずこの順序で統一します：`-webkit-backdrop-filter: blur(Xpx); backdrop-filter: blur(Xpx);`。この2行セットをエディタのスニペットとして登録しておくと、一方だけ書くミスを防げます。
公開前チェックとしてギガサイト便のURLをiPhoneのSafariで開く習慣が最も簡単な再発防止策です。手元のiPhoneがなければ社内の誰かのiPhoneで確認を依頼するか、BrowserStackなどのサービスを活用します。Safari特有の表示崩れは最初の公開前確認で防ぐのが最も効率的です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
backdrop-filterをSafariで使えるiOSの最低バージョンはいくつですか
iOS 9以降（Safari 9）から-webkit-backdrop-filterが使えます。プレフィックスなしの`backdrop-filter`はiOS 15.4以降のSafariで対応しました。古いiOSユーザーを考慮するなら両方を記述するか、rgba背景色のフォールバックを用意してください。
チェックリストを全部クリアしているのにSafariで効きません
backdrop-filterを適用する要素のbackground-colorが完全に不透明（opacity: 1 かつ rgba(x,x,x,1)）になっていると背景が透けず、ぼかし効果が見えません。背景を半透明（rgba(255,255,255,0.3)等）に設定してください。
macOS SafariとiOS Safariで見え方が違います
macOS SafariとiOS SafariはWebKitのバージョンが異なることがあり、backdrop-filterの描画が微妙に異なります。blurの強さやsaturateの効き方が違う場合は、iOS Safariを基準に値を調整することを推奨します。iOSユーザーの方が画面が小さいため視覚的な差異が目立ちやすいです。