CSS:
body{
margin:0 auto;
background-image:url("someURL"),
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
}
This works fine in modern browsers, the image stays the same when scrolling. On an android tablet however the image doesn't update right away. The image only updates about half a second after you release (move your finger away) and in the mean while the gap is just white.
Is there away to fix this issue or is it just how certain browsers behave?
background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even supported by the most widely used mobile browsers. You can ditch this idea completely and let the background scroll on small screens using media queries.
The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
Defines how the background image will behave when scrolling the page. default background-attachment: scroll; The background image will scroll with the page. It will also position and resize itself according to the element it's applied to.
It is known bug, you can find details here: http://code.google.com/p/android/issues/detail?id=3301
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With