background-attachmentはiosでは使えない？
iOSでも背景固定をするための方法と課題や問題点

通常のサイトではあまりそこまで頻度が高くないかもしれないのですが、ランディングページなどを作っていく際、割と背景を固定する見た目を好む方が多いような気がします。

実際に自分の実務においても、この背景固定を好んで使われるクライアント様も多く、よく使う1つではあるのですが、一般的な使い方でもあるbackground-attachment: fixedでは、iOSではうまく動かないという問題があります。

PCだけで良いとかであれば問題ないのですが、今の時代、しかもiOSを排除なんてことはiPhoneを対象外とすると同じなので、その選択肢はないため、別の解決策を知っておく必要があります。

とはいえ、これも解決策を知ってしまえば後はコピペ的な使い方で流用できるので、自分のコード集的な形で持っておくようにしましょう。

background-attachment: fixex;をおさらい

そもそも、本来であればbackground-attachment: fixed;を使う事で、背景画像を簡単に固定できます。
厳密に言えば、backgroundに色々他にも指定する必要がありますが、サンプルとしては下記の通りになります。

.bgfixed{
  height: 500px;
  background-image: url("/assets/img/bgfixed.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
}

といったような指定をするだけで、背景画像を固定したままスクロールすることができます。見た目的に割と目を惹くことから、LP制作などでよく使われます。

↓サンプル（iOSでは固定されません）↓

実際にはbackgroundは省略系を使って書かれる方も多いと思いますが、

.bgfixed{
  height: 500px;
  background: url("/assets/img/bgfixed.jpg") center/cover fixed no-repeat;
}

と書いても同じ動作になりますし、こちらの方が一般的かなとも思います。
実際は背景だけではなく、テキストやコンテンツなどをその上に配置して見せる事が多いように思います。

↓サンプル（iOSでは固定されません）↓

このサンプルのように、背景画像にbackground-attachment: fixed;を指定（実際は上記の様に他の設定もセットで行う事が一般的）することで、背景を固定して表示することができます。

iOSで正常に動作しないため、実際の現場では使いにくい

しかしながら、これだけ便利なタグにもかかわらず、見出しの通り、実際の現場ではなかなか使う機会がありません。というのも、iOSではこのタグの設定だと正常に動作しないためです。

Android端末とパソコンで確認という現場だと、もしかしたらiOSで正常に動作しないということには気付かないままに本番に反映してしまっているという可能性もゼロではないのですが、実際にiOSでは正常に動きません。

厳密に言うと、background-attachment: fixedと、background-size: coverが一緒に指定されている場合で、iOSでは動かないというのが正しいのですが、background-sizeのプロパティで、cover以外の値を使う機会というのは実質あまりないのが現状ですので、background-attachment: fixedは使えない状況になってしまっています。

なぜか仕様として背景画像が拡大された表示になってしまいデザイン的にも大きく崩れてしまう可能性が高くなってしまうのです。

iOSにも対応可能な背景固定の実装とは

とはいえ同じようなことをしたいという要望は、やはりランディングページの制作やサービス系のサイト制作においてはニーズも高いので、設定方法を知っておく必要があります。

先述の通り、iOSに対応するためには、background-attachment: fixedは使いません（使えません）が、代わりに使うのが、position:fixedと疑似要素を使って設定します。

実際のコードなど

iOSに対応するためには、簡単にまとめると以下のタグを使っていくことになります。

• position: fixed
• z-index: -1
• ::beforeの疑似要素
• 疑似要素のheightに100vh

あたりを指定していくことになります。このあたりも実際のコードを見ていく方が早いかと思いますので、下記を参考にしてみて下さい。

<div class="fixedwrap">
  <div class="fixedbox">
    <p>サンプルテキスト。サンプルテキスト。</p>
    <p>サンプルテキスト。サンプルテキスト。</p>
    <p>サンプルテキスト。サンプルテキスト。</p>
  </div>
</div>

.fixedwrap {
  position: relative;
  padding: 1em;
}

.fixedwrap::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url("/assets/img/fixed.jpg") center/cover no-repeat;
  z-index:-1;
}

.fixedbox{
    padding: 1em;
    background-color: rgba(255,255,255,0.8);
}

ただし、複数箇所で使ったりする作りには向かない

この方法は、実際にやってみればわかりますが、他の要素にも大きく影響を与えます。
そのため、背景を指定していないところなどにも反映されるため、他のセクションなどに白などの背景色の指定をしておく必要があります。

また、セクション毎に背景を変えたいといったりするようなシチュエーションには使えなくなってしまいます。

基本的な使い道としては、背景を完全固定してずっとスクロールするようなタイプにのみ使えるものになってしまいますので、実際の現場でセクション毎に背景を入れ替えたりして使いたいというケースの場合にはこの使い方はできません。

あくまでも、1つ背景を固定して使うというシチュエーションにのみ使いやすいものになります。

実際の現場で背景固定をセクション毎に使いたい場合どうするか

とはいえ実際の現場では、ランディングページの制作などにおいて、どうにかしてそういう使い方をしたいという場合がありますが、そういう時はどうすれば良いのか？という悩みが出てきてしまいます。

あくまでも個人的な考え・意見になりますが、だいたい自分としては下記のやり方として対応しています。

position:stickyを使う

1つの対策として、position: stickyを使う方法があります。
厳密に言うと、background-attachment: fixed;と、position: sticky;は動き方が異なるのですが、似たような動きができるので代替として使う事もシーンによっては可能になります。

一時流行ったパララックスサイトなどでよく使われていたものでもありますが、使い方次第でこちらも使えるかなと思います。

ただどうしてもstickyだと、背景固定＋上下で固定的な動きをする特徴があるため、通常の背景固定の時とスクロールした時の動きが異なるため、使えるシーンもあれば使いにくいシーンも出てくるかなとも思います。

コードを複雑にしながら調整する

先ほどのiOS対応のコードだと、どうしても画面全体に使うやり方になってしまったりするため、どうしても複数箇所に使いたいといったような使い方では使えないのですが、どうしてもそういうシチュエーション依頼が来たときなど、なんとかコードを色々調整してやったりします。

ただ、どうしてもコードが色々入れ子になりすぎたりして、よほどの時以外はあまりしない方がいいかなと思わなくもないです。

背景に使う画像を調整する

なんだかんだで、一番これがしっくりくるかなと。
使い方次第だとは思うのですが、やっぱり、background-attachment: fixed;だけで完結できるのって凄い楽なんですよね。

ただiOSではうまく動かないのですが、うまく動かない＝画像が固定で表示されるというケースで、なんならめちゃくちゃ拡大画像っぽい見え方で表示される感じになります。

画像とその上に被せるセクション的な使い方次第なんですが、iOSで見ても違和感のない使い方、背景画像をうまく使ってやるというのがなんだかんだで一番楽かなーと思ってます。背景固定ってスマホだとあまりそこまでその背景が見えるシーンというのは多くなく、PCサイト向けという気もしますしね。

そのため、なんだかんだで自分が作るの多くは、background-attachment: fixed;を使いつつ、iOSでもおかしくないような見え方にする。というパターンが多いです。

まとめ

背景の固定についてですが、なんだかんだで他の解説を見ていると、疑似要素とposition:fixed;を使ってやりましょう。的な記事が多いですが、実際にあれをやろうとすると一般的に背景固定で使ってるところの代わりになるか？というと、ほとんどならない事が多いです。

そのため、実際にどうするかというと頑張ってコードを調整するか、背景固定で変に見えないようにするか、Stickyを使って代用するかのどれかにしている事が多いんじゃないかなー？という気もしています。（もし違う簡単なやり方これあるよ。ってのあれば教えてください。）

iOSの動きがおかしいので修正してくれたらと思うのですが、もう何年もこのままなので、ある意味ではこれが仕様となってしまっている感もあるので、捨てることもできないiOSなので頑張って対応していくしかないのかなと思っています。