iOSのSafariで background-attachment: fixed; の表示崩れたときの解決策

2024.11.01
HTML&CSS

iPhoneなどiOSのSafariで、background-attachment: fixed;を設定した背景の表示が崩れた時に実施した、解決策の備忘録です。

background-attachmentは、画面のスクロールに合わせて、背景画像を固定表示するかスクロールさせるかを指定するプロパティです。「fixed」を設定することで、背景画像が固定表示になります。

Chromeのディベロッパーツールでは正常に表示されていたbackground-attachment: fixed;を設定して固定表示にした背景が、iOS Safariだけで表示が崩れる不具合がありました。

以下が問題のあったコードです。

.image_spacer {
  width: 100%;
  height: 360px;
  background-image: url("../images/image_spacer.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

不具合の原因は、background-attachment: fixed;と同時に指定したbackground-sizeプロパティでした。

２つの要素を同時に指定することができないため、疑似要素を使ったコードで固定背景を設定します。

以下が改善後のコードです。

.image_spacer {
  width: 100%;
  height: 360px;
}
.image_spacer::before {
  content: "";
  display: block;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  background-image: url("../images/image_spacer.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

ベースとなる親要素へ疑似要素beforeで背景画像を設定しています。

疑似要素は、position: fixed;を指定して固定表示させます。背景に表示されるようにz-index: -10;も合わせて設定します。

疑似要素を使用すれば、background-attachmentを使わずに背景を固定できるので、iOS Safariでも正常に表示できるようになります。