iOS Safariでbackground-attachment:fixedが効かない

background-attachment: fixed で背景を固定表示した際に、iOSのSafariで固定されないということがあったので、その際の対応方法をメモしておきます。

サンプルコード

まずはうまくいかなかった例です。

<section class="section">
	<div class="box">
		〜 略 〜
	</div>
</section>

.sectionに対して固定する背景を設定します。

.section {
	background: url(bg_sp.jpg) center top no-repeat fixed;
	background-size: 100% auto;
}
@media screen and (min-width: 768px), print {
	.section {
		background-image: url(bg_pc.jpg);
		background-size: cover;
	}
}

これで基本的には問題なさそうだったのですが、iOSのSafariで背景の固定が効いていませんでした。
うまくいかなかった場合のデモページ

調べているとbackground-size と併用するとうまくいかないという情報をいくつか見かけたので、先ほどの例からbackground-sizeを外して試してみます。

.section {
	background: url(bg_sp.jpg) center top no-repeat fixed;
}
@media screen and (min-width: 768px), print {
	.section {
		background-image: url(bg_pc.jpg);
	}
}

ただこの場合も同様に、背景の固定は効かないようでした。
うまくいかなかった場合のデモページ2

そもそもiOS Safariでbackground-attachment: fixed が対応していない？ような気がします。
Can I useなどには特にそれらしい記載はありませんでしたが、この不具合自体は数年前から報告されていて、現在も対応されていない状態のようです。

最終的に background-attachment: fixedは使用しないで、擬似要素をposition: fixedで固定表示にして、その要素に背景を設定するようにしました。

.section {
	position: relative;
}
.section:before {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: url(bg_sp.jpg) center top no-repeat;
	background-size: 100% auto;
}
@media screen and (min-width: 768px), print {
	.section:before {
		background-image: url(bg_pc.jpg);
		background-size: cover;
	}
}

これでiOSのSafariでも背景の固定を確認できました。
対応後のデモページ