よくある原因
報告を受けたらまず自分でSafariを使って同じURLを確認します。自分の環境で再現するなら原因の特定が早く、相手への問い合わせ前に修正できることも多いです。-webkit-backdrop-filterの追加とoverflow修正が必要なだけなら、AIに修正依頼してギガサイト便に差し替えれば完了します。
自分の環境では正常で相手のSafariだけで崩れる場合は、iOSのバージョン差による互換性問題の可能性があります。特にiOS 14以前のSafariはbackdrop-filterのレンダリングが不安定です。相手のiOSバージョンを確認することで対処方針が決まります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
Safari（MacまたはiPhone）でURLを開き、ぼかし効果が見えるかどうかを確認します。見えない場合はCSSに`-webkit-backdrop-filter`が追加されているか、親要素に`overflow: hidden`がないかをチェックします。問題を特定したらAIに「このCSSをSafari対応に修正して」と依頼しHTMLを貼り付けます。
修正済みHTMLをギガサイト便に差し替えます。差し替えはURLを変えずにファイルを更新できるため、相手に新しいURLを送り直す必要がありません。差し替え後に自分でSafariで確認し、正常に動作したことを確認してから相手に「修正しました、リロードしてご確認ください」と連絡します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
自分の環境で再現せず原因不明な場合の確認依頼文例：「お手数ですが確認をお願いします。(1)使用しているデバイスはiPhoneまたはMacですか？(2)Safariのバージョンを確認できますか（iPhoneなら設定→一般→情報→iOSバージョン、MacならSafari→About Safari）。(3)ページをリロードしても同じ状態ですか？」
返信でiOSバージョンが15.3以前だと判明した場合、backdrop-filterが標準仕様でサポートされていないため、-webkit-版の追加で対応するか、または`background-color: rgba(255,255,255,0.8)`のフォールバックを加えた修正版を差し替えます。iOS 14以前であれば完全なフォールバック対応が現実的です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
backdrop-filterを使うデザインを公開する前のルーティンとして、「iPhoneのSafariでURLを開いてぼかしが見えるかを確認する」というステップをチェックリストに組み込みます。ギガサイト便のURLを自分のスマートフォンで開くだけなので30秒で完了します。
同じトラブルが繰り返される場合は、今後backdrop-filterを使うHTMLのAI生成プロンプトに-webkit-プレフィックスとoverfow設定の条件を追加します。根本的にはAIに正しいCSSを出力させることが、確認・修正・連絡という一連の作業を全部省く最も効率的な対策です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
相手から「リロードしても変わらない」と言われました
Safariはブラウザキャッシュが強いため、修正版に差し替えた後も古いCSSが残っている可能性があります。「Safariで長押し→再読み込み」またはプライベートブラウズで開くよう依頼してください。それでも変わらない場合は真の表示問題です。
相手がiOSをアップデートできない環境です。backdrop-filterを諦めるべきですか
諦める必要はありません。@supportsでフォールバックを実装してください。`@supports not (-webkit-backdrop-filter: blur(1px)) { .target { background-color: rgba(255,255,255,0.85); } }`のように記述すると未対応ブラウザでは半透明背景が表示されます。
確認依頼を送らずに済む方法はありますか
公開前に自分でiPhone Safariで確認する習慣が最善です。ギガサイト便でURLを発行したらまず自分のiPhoneで開き、ぼかしが見えるかを確認します。問題があれば相手に送る前に修正できるため、確認依頼のやり取りが不要になります。