飽き性な男のムダ話

飽き性な男のムダ話

飽き性な男のムダ話

キャラクター紹介

Web・WP関連

【パララックス・iOS】background-attachment: fixedがスマホで効かない!?原因と解決法を解説

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

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

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

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

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

1.パララックスとは

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

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

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

リュウイチ
リュウイチ
あー、確かに背景画像だけ動かないサイトを見かけたことがあるな。
でしょでしょ!
要素をレイヤー分けしたようなデザインにするだけで、かなりオシャレなデザインになるよ!
Taku
Taku

2.iPhoneで見ると表示が崩れる!?

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

パララックスのデザインがどんなものかが一目で分かるから、一回このサイトを見てほしいな!
Taku
Taku
リュウイチ
リュウイチ
おい、さりげなく宣伝するなよ。
あー、バレましたかー()
Taku
Taku

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

▼Androidで見たサイト

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

▼iPhoneで見たサイト

なんだこれ!すっげー画像が巨大化してるじゃあないか!!!
Taku
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
Taku
リュウイチ
リュウイチ
とりあえず原因は分かったんだな。

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

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

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

リュウイチ
リュウイチ
通りでiPhoneだけ表示がおかしくなるわけだな。
なんか、background-attachmentがポ○モンの「ポ○ゴン」に見えてきたよ…
Taku
Taku
リュウイチ
リュウイチ
は?
ピカチ○ウの攻撃が原因の事故だったのに、なぜかポ○ゴンのせいにされてお蔵入りにされる…
iOSのせいでバグってるのに、background-attachmenのせいにされて使われない…
あぁぁ…かわいそうに…
Taku
Taku
リュウイチ
リュウイチ
はい、そうだな。
(その「分かる人にはわかる」みたいなネタやめろよ)

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

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

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

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

リュウイチ
リュウイチ
また記述を書き直すとか大変じゃあないのか?
そんなことないよ!簡単な記述にするだけでしっかりiOS対応できるから大丈夫!
これから分かりやすく説明していくね!
Taku
Taku

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

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

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

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

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

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

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

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

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

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

▼iPhoneで見たサイト

たったこれだけの記述を書き換えるだけで、どの端末にも対応できるパララックスサイトが完成するよ!
Taku
Taku
リュウイチ
リュウイチ
俺には良くわからんが、そんなに大変な作業ではないんだな。
うんうん!
ってことで最後に改めてできあがったパララックスサイト▶を見てくれると嬉しいな!
Taku
Taku
リュウイチ
リュウイチ
だから宣伝するなよ。

4.最後に

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

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

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


コメント一覧

  1. 十万石まんじゅう より:

     アンドロイド派なのでアイフォンで背景画像が固定されていないことに気づかず、アイフォンユーザーから指摘されて焦っていたのですが、とても丁寧な解説のおかげで無事解決できました!ありがとうございます!
     
     絵のタッチや文章、とても良いブログですね!ついついブログ記事を読み漁ってしまい、イラレの袋文字の記事を見て、さっそく真似させていただきました。

    • taku より:

      十万石まんじゅうさん
       
      コメントありがとうございます!
      無事解決できたとのこと、お役に立ててとても嬉しいです!!
      iPhoneでも「background-attachment」が使えるようになって欲しいですね…
       
      他の記事も読んでいただきありがとうございます!
      時間をかけてイラストや記事を作った甲斐がありました!
      今後ともよろしくお願いします!!

この記事へコメントする

メールアドレスが公開されることはありません。

CAPTCHA


PROFILE

プロフィール

プロフィール画像

Taku

社会人2年目のWebデザイナー

専門学校でWebやグラフィックの技術を2年間学び、
印刷会社のデザイナーとして就職。

しかし、Web技術のスキルアップを目指して
半年で退職。現在はWeb制作会社で奮闘中。

保育園児の頃からイラストを描くことが大好き。
オリジナルキャラクターの創作イラストを描いている。

ハマって得た "ムダ知識" も、
誰かの役に立つはずだと信じてブログを開設。

好きになると誰よりも詳しくなるタイプだが、
冷めるのも凄まじく早いのが欠点。