iOSでも background-attachment: fixed に近い動作を実現する

個人的に background-attachment: fixed をぜんぜんつかわないので気づかなかったのですが、iOS8でもつかえないんですね。

昔つくったコード をiPhoneで確認して気づきました。

CSS

html {
    height: 100%;
}

body {
    height: 400%;
    background: #e3e3e3 url(http://jsrun.it/assets/7/K/k/K/7KkKE.jpeg) center center no-repeat;
    background-attachment: fixed;
    background-size: contain;
}

p {
    margin: 20px;
}

DEMO

Can I use ではつかえるとかいてあるのに不思議ですね。

ちなみに after要素 を position: fixed で固定したものは問題なく動きました。

CSS

html {
    height: 100%;
}

body {
    height: 400%;
    
    &:after {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        content: "";
        background: #e3e3e3 url(http://jsrun.it/assets/7/K/k/K/7KkKE.jpeg) center center no-repeat;
        background-size: contain;
        z-index: -1;
    }
}

p {
    margin: 20px;
}

DEMO