なぜSafariだけ崩れるのか
SafariはGoogleやMozillaとは別のWebKitというエンジンで動いています。同じCSSでも解釈が微妙に異なる部分があり、ChromeやEdge（どちらもBlink系）では通っていた書き方がSafariでだけ意図どおりにならないことがあります。
特に新しめのCSS機能はSafariの対応が一拍遅れることがあり、ベンダー接頭辞が必要だったり、フォールバックを書かないと無視されたりします。逆にSafariだけが先行して挙動を変えるケースもあるため、片方のブラウザだけで確認して完成とみなすのは危険です。
崩れやすい代表的なポイント
Safariで起きやすい崩れには傾向があります。まず崩れ方を観察し、どのカテゴリに当てはまるかを見極めると原因に早くたどり着けます。
- FlexboxやGridの折り返し・高さ計算が他ブラウザとずれる
- position: sticky が効かない、または親要素の overflow 指定で無効化される
- 100vh が画面下部のツールバーぶんだけ大きく計算され、要素がはみ出す
- input や button のデフォルトの見た目（角丸・影）が残り、デザインと違って見える
- 日付や数値の input、画像の object-fit などの細かな描画差
症状別チェック表
Safariだけ表示が崩れるときの原因と対処は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
原因を切り分ける手順
やみくもにCSSをいじる前に、どこで崩れているのかを順番に確認します。次の流れで進めると、見当違いの修正を避けられます。
- まず崩れているページのスクリーンショットを撮り、正常なブラウザと並べて差分箇所を特定する
- Safariの環境設定で「開発」メニューを有効にし、Webインスペクタで該当要素のサイズと適用CSSを確認する
- 問題のCSSプロパティをひとつずつ無効化し、どの指定が原因か当たりを付ける
- そのプロパティのSafari対応状況を調べ、接頭辞やフォールバックが必要かを確認する
- 修正後はSafariだけでなく他ブラウザでも再確認し、片方を直して別方を壊していないか検証する
よくある修正パターン
100vhで下部が切れる場合は、固定の高さに頼らず min-height や、より新しい単位への切り替え、コンテンツに応じた高さ指定を検討します。stickyが効かないときは、親要素に overflow: hidden が掛かっていないか、stickyに top などの基準値が指定されているかを確認します。
フォームの見た目がそろわないときは、appearance を明示してデフォルトの装飾をリセットしたうえでデザインを当て直すと安定します。いずれも、Safariのために書いた指定が他ブラウザの表示を壊さないかをセットで確かめることが大切です。
実機がないときの確認とレビュー共有
Safariの崩れはmacOSやiOSの実機・実バージョンでしか再現しないことが多く、手元にない環境の確認は他者の協力に頼りがちです。修正版を関係者やテスターにすぐ見てもらえる状態にしておくと、確認の往復が短くなります。
ギガサイト便なら、修正後のHTMLやZIPをドロップするだけで共有URLが発行でき、相手はSafari実機でそのURLを開いて表示を確認できます。同じURLのままファイルを差し替えられるので、直してはSafariで見てもらう、というレビューのサイクルをリンクを送り直さずに回せます。社外に渡す確認URLにはパスワードやメール認証を併用し、公開期限を設定しておくと安心です。
よくある質問
ChromeとEdgeでは正常なのにSafariだけ崩れるのはなぜですか。
ChromeとEdgeは同系統のエンジンですが、SafariはWebKitという別エンジンで動くためCSSの解釈差が出ます。新しいCSS機能の対応時期も異なるので、片方で問題なくても別系統では崩れることがあります。
Safariの開発者ツールはどう開きますか。
Safariの環境設定の詳細設定で「Webデベロッパ用の機能を表示」または「開発メニューを表示」を有効にすると、メニューバーから開発メニューとWebインスペクタが使えるようになります。
実機のSafariが手元にありません。どう確認すればよいですか。
確実なのは実機での確認です。手元にない場合は、修正版を一時的な共有URLにして、Safari環境を持つ人に開いて見てもらうのが現実的です。表示は環境差が大きいので最終確認は実機が望ましいです。
100vhで画面下が切れるのはどう直せばよいですか。
Safariはアドレスバーぶんを含めて高さを計算することがあり、はみ出す原因になります。固定の100vhに頼らず、min-heightにする、より新しい高さ単位を使う、コンテンツ基準の高さにするなどの方法を検討してください。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。