background-attachment:fixedがスマホで効かない理由
background-attachment:fixedは、背景をビューポートに固定し、コンテンツだけがスクロールするように見せる指定です。PCのブラウザでは多くの場合パララックス風に動きますが、モバイルブラウザでは無視されたり、固定されずに一緒にスクロールしたりします。
これは、モバイルでアドレスバーの表示・非表示やスクロールの最適化が背景の固定描画と相性が悪く、パフォーマンスや表示の安定性を優先して各ブラウザが意図的に挙動を変えているためです。バグではなく、仕様上の割り切りに近い挙動です。
代替1: 固定配置の背景レイヤーを使う
スマホでも固定背景を成立させたい場合、background-attachmentに頼らず、背景画像を別の要素として置き、その要素をposition: fixedで画面に固定する方法があります。コンテンツをその上に重ねれば、背景が留まったままコンテンツがスクロールする見た目を作れます。
ただしposition: fixedもモバイルでは描画負荷やアドレスバーの影響を受けることがあるため、画像を軽くする、固定する範囲を限定するなど、パフォーマンスへの配慮が必要です。
症状別チェック表
背景の固定（parallax風）がスマホで効かないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
代替2: 効果を割り切る・段階的に出す
パララックスはあくまで装飾なので、スマホでは無理に再現せず、背景を通常スクロールに切り替えるのも現実的な判断です。メディアクエリで、十分な性能が見込める画面でだけ固定背景を有効にし、モバイルではシンプルな表示にする、という段階的な出し方が安定します。
本格的なパララックスをどうしても出したい場合は、スクロール量に応じて背景の位置をスクリプトで動かす方法もありますが、処理負荷や酔いやすさ、アクセシビリティ（動きを減らす設定への配慮）に注意が必要です。装飾の効果と使い勝手のバランスを取ることが大切です。
スマホ対応の固定背景を作る手順
次の順で進めると、スマホでも破綻しにくい固定背景にできます。
- まず実機で、background-attachment:fixedが効いていないことを確認する
- 固定が必須なら、背景をposition:fixedの別レイヤーに置き換える
- 背景画像を軽量化し、固定の範囲を必要な部分に限定する
- 性能が厳しいモバイルでは、メディアクエリで通常スクロールに切り替える
- 動きを減らす設定（prefers-reduced-motion）に配慮し、過度な効果を抑える
- 複数の実機でスクロールのなめらかさと表示の安定を確認する
実機での動きを共有して確認する
固定背景やパララックスの効き方は、ブラウザや端末によって大きく異なり、デスクトップでの確認だけでは不十分です。スクロールのなめらかさやアドレスバーの影響は、実機で初めて分かることが多くあります。
検証版を関係者に見てもらうなら、ギガサイト便にHTMLやZIPをドロップして共有URLを発行すると、各自が手元のスマホで実際のスクロールの動きを確かめられます。QRコードを配れば端末ですぐ開けます。同じURLのまま中身を差し替えられるので、実装を変えるたびに見比べてもらえ、確認用ページにはnoindexが付いて検索結果に出ません。社外に見せる場合はパスワードやメール認証を併用して相手を限定できます。
よくある質問
background-attachment:fixedはどのブラウザでも効きませんか。
PCの主要ブラウザでは多くの場合効きますが、モバイルブラウザでは無視されたり固定されなかったりすることが一般的です。バグではなく、パフォーマンスと表示安定のためにブラウザが意図的にそうしているため、モバイルでは代替手段を前提に設計するのが安全です。
position:fixedの背景レイヤーにすれば確実ですか。
background-attachmentより成立しやすいですが、position:fixedもモバイルでは描画負荷やアドレスバーの影響を受けることがあります。背景画像を軽くし、固定する範囲を限定するなど、性能面の配慮を併せて行うと安定します。
パララックスはアクセシビリティ上問題になりますか。
大きな動きは乗り物酔いに似た不快感を与えることがあります。OSの「動きを減らす」設定（prefers-reduced-motion）を尊重し、その場合はパララックスを無効化して通常表示にするなど、配慮した実装にするのが望ましいです。
スマホではパララックスを諦めるべきですか。
必須でなければ、モバイルでは通常スクロールに切り替えるのも妥当な判断です。装飾効果のために表示が不安定になるより、メディアクエリで性能が見込める環境だけ有効にするほうが、結果的に使い勝手の良いサイトになります。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。