background-attachment:fixedと指定することで、その背景が固定表示されるという「素晴らしい」仕様があるのですが、iOS、すなわちAppleさんが言うことを聞かない様子です。そのことをバグとも言います。
当サイトのトップページでも採用している「Appleさんに言うことを聞いてもらうための方法」をご紹介します。
固定背景をiOSでも実現する方法（background-attachment:fixedがiOSで効かない件）
通常の背景画像
まず、background-attachment:fixedを指定しない場合の背景画像をお示しします。
「background-attachment:fixed」を指定した場合
background-attachment:fixedを指定した場合です。iOS端末以外で、スクロールしながらご確認ください。また、iOS端末をお持ちの方はそちらでAppleさんが言うことを聞かない様子をご確認ください。
疑似要素にposition:fixedを指定した場合
疑似要素にposition:fixedを指定し、かつheight:100vhにするとbackground-attachment:fixedのようになります。z-index:-1も必要です。これはこのページでデモするわけにはいかないので、当サイトのトップページをご覧ください。割と下の方です。
ソースコードとしては以下のような形になります。
HTML
<body>
<div class="bg"></div>
<div class="bg-demo"></div>
</body>
CSS
.bg::before{
content: '';
position: fixed;
background-image: url('画像の場所');
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-size: cover;
z-index: -1;
}
.bg-demo{
width: 100%;
height: 300px;
}
留意点
この実装、難点があると思っています。
一つには、これを実装したページはクリックした箇所を視覚的に確認できるサービス、ヒートマップで見られなくなるものがあるということ。検証してませんが、たぶんこれが原因です。ヒートマップは無料で使えるものだけでもいくつかあり、MicrosoftのClarityであれば問題なく見られます。
また、これで指定した画像は画面全体に貼りつきますので、背景色を指定しない箇所は画像が表示されるのですが、背景色を指定しても、謎の隙間が空くことがあります。margin, paddingの指定をくまなく確認しても、そこに隙間がないはずのところに隙間が空くという現象です。その場合、疑似要素とposition:absoluteを使って無理矢理に埋めたりしてます。
他にも不具合らしき現象を見て、この実装をあきらめたケースがあります。
まとめ
Appleさん、ご対応のほどを何卒よろしくお願い申し上げます。
BringFlower｜稲田 高洋