【CSS】iPhone Safariで上下に余白ができてしまう問題

HTML・CSS・JavaScriptで制作したサイトを調整していた際、iPhone（iOS Safari）でのみ上下に白い余白が出てしまう現象に遭遇しました。

問題の画像↓（ちなみにこのサイトはhttps://myfavetype.fanelab.com/です！）

調べていく中で分かった原因と、実際に効いた解決策をまとめておきます。

同じ症状で困っている方の参考になれば嬉しいです。

※この記事は、自分の体験をもとにChatGPTに助けてもらいながら書いてる記事です！

背景固定に background-attachment: fixed; が効かない問題

モバイル端末では、background-attachment: fixed; がほぼ使えません。

そのため、背景を固定したい場合は

という方法を取る必要があります。

しかし、ここで 意外な落とし穴 にハマりました。

背景固定用の要素を最背面に置こうとして、下記のような記載をしていましたが、

background-fixed {
  position: fixed;
  z-index: -1;
}

iPhone Safari では z-index: -1 がレイアウトに悪影響を与えることがある ことが分かりました。

具体的には：

などの症状が出ます。

背景用の要素には z-index を付けない（初期値のままにする）
メインコンテンツ側だけ z-index を指定する

.main {
  position: relative;
  z-index: 10;  /* コンテンツを前に */
}

これで上下の謎の余白が消えてくれました。

背景固定のはずなのに、iPhoneではスクロールすると少し動いてしまう…。

これは iOS Safari の「動的なブラウザUI（アドレスバーの出入り）」によるものです。

CSS の dvh（ダイナミックビューポート高さ）を使うと安定します。

.background {
  height: 100dvh;
}

これで背景の「ビヨーン」とした動きがほぼ解消されます。

スクロールすると、下のほうに白い線のような余白がチラッと見える現象。この場合は単純に背景色が原因でした。

私はリセットCSSを読み込んでから、独自のCSSを書いていました。

リセットCSSのhtmlに、背景が白と指定されていたのが原因でした。

リセットCSSを読み込んでいる方はご確認ください！

html {
  background-color: #000;
  scroll-behavior: smooth;
}

全画面に黒背景が敷かれるため、下の余白が見えなくなります。
（もちろんサイトのデザインに合わせて色は変更してください。）

body に背景色を設定してしまうと、固定にした背景の上に重なってしまうことがあるので、htmlに記載するといいと思います。

今回の修正で特に重要だったのはこの3つです。

これの原因を探すのに、検索してもなかなか記事が見つからなかったので、この記事が誰かのお役に立てたら幸いです！