iOS Safariでbackground-attachment:fixedが効かない不具合

iOS Safariでbackground-attachment:fixedが効かなくなる不具合があります。

原因

この現象はbackground-sizeプロパティを指定していることで起こります。

回避方法

この不具合を回避するには、次のように疑似要素を使い、その疑似要素に対して背景を指定することで回避できます。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
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:"";
}