HTML&CSS

固定背景をiOSでも実現する方法(background-attachment:fixedがiOSで効かない件)

background-attachment:fixedと指定することで、その背景が固定表示されるという「素晴らしい」仕様があるのですが、iOS、すなわちAppleさんが言うことを聞かない様子です。そのことをバグとも言います。

そこで「Appleさんに言うことを聞いてもらうための方法」をご紹介します。

通常の背景画像

まず、background-attachment:fixedを指定しない場合の背景画像をお示しします。

「background-attachment: fixed」を指定した場合

background-attachment:fixedを指定した場合です。iOS端末以外で、スクロールしながらご確認ください。また、iOS端末をお持ちの方はそちらでAppleさんが言うことを聞かない様子をご確認ください。

iOSでも固定背景にする方法:position: fixedとclip-pathを利用する

次のデモはiOSでもかなり近い感じで固定されます。背景画像を指定した要素について、position: fixedかつheight:100vhにするとbackground-attachment:fixedのようになります。z-index:-1も必要です。

そして、その要素の親要素でclip-pathを用いてくり抜きます。

clip-pathでくり抜かないと、他の要素で背景色を指定しない箇所は画像が表示されるということになり、また背景色を指定しても、謎の隙間が空くことがあります。margin, paddingの指定をくまなく確認しても、そこに隙間がないはずのところに隙間が空くという現象です。なので、くり抜く方法が良いと思います。

ソースコードとしては以下のような形になります。

HTML

<div class="container">
   <div class="inner">
      <div class="bg"></div>
   </div>
</div>

CSS

.container{
   position: relative;
   height: 300px;
}
.inner{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   clip-path: inset(0);
}
.bg{
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-image: url('画像の場所');
   background-size: cover;
   background-position: center;
   z-index: -1;
}

iOSで固定背景にする際の留意点

ご紹介した本実装にも、まだ難点があると思っています。

一つには、これを実装したページはクリックした箇所を視覚的に確認できるサービス、ヒートマップで見られなくなるものがあるということ。検証してませんが、たぶんこれが原因です。ヒートマップは無料で使えるものだけでもいくつかあり、MicrosoftのClarityであれば問題なく見られます。

また、clip-pathに対するバグなのか、background-imageに対してのバグなのか分かりませんが、この方法でも、まだ少しiOSの見え方はおかしいことがあります。clip-pathではなく、より幅広くサポートされているclipを用いる方法もありますが、それだとさらにiOSの挙動はおかしいです。

まとめ

Appleさん、新しい仕様への積極的なご対応を何卒よろしくお願い申し上げます。

著者のイメージ画像

株式会社BringFlower
稲田 高洋(Takahiro Inada)

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