お問い合わせはコチラから

iOSでbackground-attachment:fixedが表示されない不具合の解決方法

サイト運営

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を同時に使う場面は、意外と多く、結構な頻度で問題が起きます。

スマホだけ、背景画像が表示されない時には、この記事を思い出して解析してみてください。

タイトルとURLをコピーしました