こんにちは～Taku(@takumuda_1093)です。

ここ数年で定着したパララックス効果のあるWebデザイン。
ですが、一部スマートフォンで閲覧した時に表示が崩れてしまう問題があるようです。

先に結論を書くと「background-attachment: fixed」は使わない方が良いです。

自分もパララックス対応のコーディングをしていたときに、スマホ対応にかなり苦戦したので、解決法を皆さんに紹介します。

あまりプログラムやコーディングに詳しくない人でも分かりやすいように解説していきますので、最後までお付き合いくださいね。

1.パララックスとは

まず、パララックスとはなにかおさらいしていきましょう。

パララックスとは「視差効果」のことを指します。
要素同士の動きに差を加えることによって、立体感やエフェクトを表現する効果のことです。

主に、背景画像を固定して、文字などの要素だけがスクロールで動くようにする使われ方が多いです。

リュウイチ

あー、確かに背景画像だけ動かないサイトを見かけたことがあるな。

でしょでしょ！
要素をレイヤー分けしたようなデザインにするだけで、かなりオシャレなデザインになるよ！

Taku

2.iPhoneで見ると表示が崩れる！？

筆者はこのブログ以外にも、自身のイラストを載せるサイト▶を運営しています。
このイラストサイトのデザインをリニューアルする際に、パララックスを取り入れてコーディングをしました。

※追記：2022年5月12日
現在サイトのデザインが大きく変わっていますが、
同様のパララックス技術を使用しているので安心して読み進めて下さい！

パララックスのデザインがどんなものかが一目で分かるから、一回このサイトを見てほしいな！

Taku

リュウイチ

おい、さりげなく宣伝するなよ。

あー、バレましたかー()

Taku

一通りコーディングを終えて、いざ最終チェック。
PC版の表示は問題なく、スマホ(Android)の表示も問題なし。

▼Androidで見たサイト

最後はiPhone(iOS)での表示確認だけですが「なんの問題もないだろう」と軽い気持ちでチェックしてみると…

▼iPhoneで見たサイト

なんだこれ！すっげー画像が巨大化してるじゃあないか！！！

Taku

キャラクターの顔は愚か、アホ毛の先端だけが高倍率表示されているいう悲惨な状態に…。

リュウイチ

俺の髪の毛がツノみたいになってるな。

キャッシュ(サイトの情報を保存する機能)の影響でバグってるだけかと思い、何度かリロードしてみるも変化なし。
原因が分からず調べてみると、とあるcssとiOSの関係に問題があることが分かってきました。

①原因は「background-attachment: fixed」だった

元々は以下のコードで記述をしていました。
（以下のコードは良くない記述なので間違えてコピペしないように！！）

See the Pen
iOS非対応のパララックス by Taku@絵描き兼ブロガー(多分) (@takumuda_1093)
on CodePen.

間違った記述はしていないし、iPhone以外の端末なら問題なく表示されている。

なぜ、iPhoneだけがうまく表示されないのか小難しいサイトを色々探っていくと、以下のcssが悪さをしていることが分かりました↓↓

background-attachment: fixed;
background-size: cover;

原因はお前らかー！！

Taku

リュウイチ

とりあえず原因は分かったんだな。

②iOS端末では「background-attachment: fixed」は効かないらしい

「background-attachment」は、スクロールする時に背景画像を固定したままにするか、
スクロールに合わせて移動させるかどうかを指定するためのれっきとしたcssプロパティです。
なので、このプロパティが間違った記述というわけではありません。

ですが、この「background-attachment」と一緒に「background-size: cover」というプロパティを一緒に記述すると、iPhone端末でバグが発生してしまいます。
これは公式でも確認されているiOSの不具合らしいです。

リュウイチ

通りでiPhoneだけ表示がおかしくなるわけだな。

なんか、background-attachmentがポ○モンの「ポ○ゴン」に見えてきたよ…

Taku

リュウイチ

は？

ピカチ○ウの攻撃が原因の事故だったのに、なぜかポ○ゴンのせいにされてお蔵入りにされる…
iOSのせいでバグってるのに、background-attachmenのせいにされて使われない…
あぁぁ…かわいそうに…

Taku

リュウイチ

はい、そうだな。
(その「分かる人にはわかる」みたいなネタやめろよ)

③妥協しないでしっかりiOS対応させよう

「不具合ならしょうがないし妥協するかー。」なんて思っているそこのあなた！！
その考えは捨てて今すぐに対応させましょう！！

iPhoneは皆さんもご存知の通り、日本人の半数以上が使用(シェア)しているスマートフォンになります。
言い方を変えると、せっかくこだわってパララックスサイトを制作したのに、多くの人にバグった表示で見られてしまうことになります。
そんなの悲しすぎますよね。

なので、どんな端末でもしっかり綺麗に見ることができるように記述を書き直していきましょう。

リュウイチ

また記述を書き直すとか大変じゃあないのか？

そんなことないよ！簡単な記述にするだけでしっかりiOS対応できるから大丈夫！
これから分かりやすく説明していくね！

Taku

3.iOSでもパララックス対応させる記述

それでは、iOS端末でもパララックスを綺麗に表示させる解決法を紹介します。

記述は簡単で「background-attachmen」を使うのではなく、全体の要素に「擬似要素」で背景を表示して固定させるだけです。

擬似要素とは、一部の要素(セレクター)にだけ特定のスタイルを付けることができる指定方法になります。
よく使われるのは、マウスで選択しているときだけ文字や画像の見た目を変える「:hover」などがあります。

今回は擬似要素の「::before」を使用してコーディングしていきます。

文章でちまちま書いても意味が伝わらないと思うから、まずは下のコードを見てほしい！

Taku

See the Pen
iOS対応のパララックス by Taku@絵描き兼ブロガー(多分) (@takumuda_1093)
on CodePen.

実際にどのような記述でiOS対応のパララックスを表現させたのかは以下の通りです。

1. ①bodyなど、全体の大元になる要素に「擬似要素(::before)」を記述します。
2. ②指定した擬似要素に「background」で背景画像を指定します。
3. ③擬似要素全体に「position: fixed;」で固定表示させます。

以上の記述をすることで、無事にiPhoneでも綺麗に見ることのできるパララックスサイトが完成しました。

▼iPhoneで見たサイト

たったこれだけの記述を書き換えるだけで、どの端末にも対応できるパララックスサイトが完成するよ！

Taku

リュウイチ

俺には良くわからんが、そんなに大変な作業ではないんだな。

うんうん！
ってことで最後に改めてできあがったパララックスサイト▶を見てくれると嬉しいな！

Taku

リュウイチ

だから宣伝するなよ。

4.最後に

パララックスを制作する人の多くがぶつかるであろうiOS対応の記述について解説していきました。
もし身の回りで「iPhoneだけパララックスの表示がおかしい！」と頭を抱えている人がいたら、ぜひ教えてあげてください。

早く「background-attachment」と「background-size: cover」を組み合わせてもバグが発生しないように対応してもらいたいものですね。

最後まで読んでいただきありがとうございました！