Menu
Am I just going crazy, or does background-attachment:fixed; really not work in the native Android browser?
I already implemented a simple fix by using two divs instead of one... The first div is positioned absolutely and contains the fixed background image, the other div goes on top of it and contains the scrolling content.
The issue with this fix (aside from the unnecessary complication) is that for some reason, when I am scrolling the content over the background image div, the background image disappears altogether! :(
Has anyone else found a workaround that isn't buggy, or how exactly are we supposed to work with this?
306
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.
To keep your background fixed, scroll, or local in CSS, we have to use the background-attachment property. Background-attachment: This property is used in CSS to set a background image as fixed or scroll. The default value of this property is scroll.
With native browser scrolling you cannot do that. It's a bug in the default Andriod browser. To implement a fixed element at the top or the bottom you have to apply position: fixed on it and then implement a custom scrolling on the other element which contains the content to scroll.
I used this Library for this kind of problems: http://cubiq.org/iscroll-4
You can find examples on its page.
157
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
