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を指定していた要素に直接書いております。
はあ、効率よくコードが書けるようになりたい・・・
この記事が気に入ったらサポートをしてみませんか?