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|稲田 高洋

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。