background-attachment:fixedはiOSでは機能しない。

背景固定をさせた方は誰しもが失敗するのではないでしょうか。background-attachment:fixedの落とし穴。「最初から教えてよーー！！！！」と感じた失敗について書いていきます。

background-attachment:fixedを使えば簡単に背景固定ができますが、実はiOS対応していないので実機(スマホ)で確認するとえらいことになっています。ですが疑似要素でposition:fixedを追加したらOKです。

ググり、参考になった記事は以下になります。

「iOSでbackground-attachment:fixedが表示されない不具合の解決方法 | オランダで生きていく」https://nldot.info/background-to-attachmentfixed-in-ios-how-to-resolve-the-discrepancy/

下記コードを追加するだけで解決しました。

body::before {
   position:fixed;
   top:0;
   left:0;
   z-index:-1;
   width:100vw;
   height:100vh;
   background:url("img/sample.jpg") no-repeat;
   -webkit-background-size:contain;
   background-size:contain;
   content:"";
}

ディベロッパーツールではbackground-attachment:fixedでも指示通り表示されますが、いざ実機で確認すると「！？！？！？！」です。あくまで検証のツールです。実機確認の重要性を痛いほど感じました。必ず実機でも確認しましょう！

〜おまけ〜

ちなみに私はoverflow:hiddenの関係でposition:relative、position:staticsなどを使用しなければなりませんでした。そのためposition:fixedをスマホ対応のメディアクエリでbackground-attachment:fixedを指定していた要素に直接指令する・・・のではなく、bodyの下に新たにdivを追加してしまいました。

【HTML】

<div class="bg-body"></div>

【CSS】

	.bg-body:before{
       position:fixed;
       top:0;
       left:0;
       width:100vw;
       height:100vh;
       background:url("../img/background/sp-2.png") no-repeat;
       -webkit-background-size:contain;
       background-size:contain;
       content:"";
    }

通常は記事通りコードをコピペすれば問題ないかと思います。z-indexはbackground-attachment:fixedを指定していた要素に直接書いております。

はあ、効率よくコードが書けるようになりたい・・・