Android/Mobile Webkit CSS Background-Attachment:Fixed Not Working?

27,027

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.

Share:
27,027
delta9
Author by

delta9

yay

Updated on April 21, 2020

Comments

  • delta9
    delta9 about 4 years

    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?