【iOS Safari】background-attachment: fixedが効かない！CSSパララックス回避策

background-attachment: fixed; を使うと、背景をビューポートに固定して“パララックス風”に見せられます。これは仕様としても「fixed＝ビューポート基準で固定」という意味です。

ただ、iPhoneの **iOS Safari では「固定されない」「ズレる」「拡大される」**などの報告が昔から多く、特に古いiOS Safariでは非対応/部分対応の期間が長くありました。

現在のiOS Safariは「対応」扱いのバージョンもありますが、実装条件によって崩れるケースが出るので、安定運用なら回避策を持っておくのが無難です。

そこでこの記事では、background-attachment: fixed を使わずに、（固定レイヤー＋クリップ）で iOS Safari でも“背景固定っぽく”見せる方法を紹介します。

パララックスサンプル

背景固定のサンプルをこちらへ埋め込みました。
ちゃんと背景が固定されてるのが分かると思います。

完成コード（コピペOK）

コードはこれだけです。

<div class="parallax">
	<div class="parallax-img">
		<img src="parallax.jpg">
	</div>
</div>

.parallax {
	width: 100%;
	height: 100%;
	min-height: 250px;
	clip-path: inset(0);
}

.parallax-img {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
}

.parallax-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

仕組み（なぜこれでiPhoneでも安定する？）

1) 背景を「background」ではなく「固定レイヤー」として作る

background-attachment: fixed の代わりに、背景用の要素を position: fixed でビューポートに貼り付けます。
これで「固定背景」の土台を作れます。

2) clip-path: inset(0) で“見せたい範囲だけ”切り抜く

clip-path は「要素の表示領域（クリッピング領域）を作り、内側だけ表示する」プロパティです。
inset() は「上下左右からの内側距離で四角形を定義する」関数で、inset(0) は “余白ゼロ＝要素の矩形そのまま” を意味します。

つまり .parallax が “覗き窓” になり、画面に固定された .parallax-img が その窓の中だけ見える状態になります。

対応ブラウザ（clip-path: inset(0) はどこまでOK？）

• clip-path 自体は広く利用されています（ただし “機能の一部はブラウザ差がある” という注意付き）。
• 今回使う clip-path: <basic-shape>（inset() など）は、互換性データ上 Safari / iOS Safari でもかなり前から対応しています（IEは非対応）。
• Safariは経緯的に挙動差が出ることがあるので、保険として -webkit-clip-path を併記しておくと安心、という実務的な話もよく出ます。

注意点

高さが決まらないと見えない

.parallax { height: 100%; } は、親要素側で高さが決まっていないと「100%」にならず、意図通りの表示にならないことがあります。
今回はmin-height: 250px;で高さを出しています。
こちらの値をデザインに合わせて変更してください。

祖先に transform があると position: fixed が“固定”じゃなくなる

position: fixed は基本ビューポート基準ですが、祖先要素に transform / filter などが付くと、その祖先が包含ブロックになって fixedが効いてないように見えることがあります。
「なんか固定がズレる…」時は、親〜祖先にそれらが無いかチェックすると早いです。

画像は重めになりやすい

固定レイヤーは端末によって負荷が出やすいので、画像は圧縮して軽めにしておくと安心です。