Author is Aleš Sýkora
Updated: 8. 3. 2023, Added: 6. 3. 2023
Fixed background white gap fix on Android/iOS with CSS
If you use background-attachment:fixed; in your CSS for your HTML body, then you may encounter a bug on mobile devices. When you scroll down, background jumps and create a white gap.
You will propably have this setup:
background-attachment:fixed;
background-size:cover;
To fix the issue quick and easy, use the background in pseudo element :after the body like this:
body {
background:#fff;
}
body:after {
content:"";
position:fixed;
z-index:-1;
width:100vw;
height:100vh;
background:url(images/rocks.png) no-repeat;
background-size: cover;
}
That's it! I hope it helps.