固定背景を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さん、新しい仕様への積極的なご対応を何卒よろしくお願い申し上げます。