こんにちは、絶賛24時間プログラミング中のasuchi0819です。
(んなわけない
ちょっと所要にて、背景画像をスクロールしても動かしたくない実装をしなければならなかったので、その覚書です。
まず、iOSでは背景画像のcover時にbackground-attachment:fixed;を指定することはできません。
そこで、:berofeに背景画像として設定すればよいです。
しかし、ここで少し落とし穴があるのでコードを見てください。
body:before{content:"";display:block;position:fixed;bottom:0;left:0;z-index:-1;width:100%;height:100vh;overflow:hidden;background:url()centerno-repeat;background-size:cover;}多くのコードでは、bottom: 0;がtop: 0;や、overflow: hiddenがなかったりしますが、この二つがないと、スムーズに動作しません。
100vhなので、ツールバーの値の変化を受けることになります。そのため、overflow:hiddenにしておかないと縦方向でのスクロールバーが出現してしまいます。
また、topではなく、bottomでないと、スムーズにいきません。
是非皆さんも試してみてください。
検証機材。
iPadOS 13.3 iPad 6th