iOSのsafariでCSSで指定したbackground-attachment:fixedが表示されない時があります。これはiOS safariの有名な不具合なのですが、実機でしか再現しないので結構厄介な問題になりがちです。
この記事では、スマホだけ背景画像が表示されない！という問題が起きた時のために、解析の参考となる原因と解決策をまとめてあります。
background-attachment:fixedが表示されない条件は？
「background-attachment: fixedとbackground-size: coverを同時に使うとiOSで問題が起きる」
解決方法は？
解決方法は疑似要素を使うことです。
background-attachment:fixedを指定していた要素の疑似要素としてCSSを追加します。
元のCSSはいりません。
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とbackground-size: coverを同時に使う場面は、意外と多く、結構な頻度で問題が起きます。
スマホだけ、背景画像が表示されない時には、この記事を思い出して解析してみてください。
