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

android css mobile webkit mobile-webkit
delta9 picture delta9 · Feb 19, 2012 · Viewed 26.6k times · Source

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?

Answer

laszlo-horvath picture laszlo-horvath · Apr 20, 2012

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.

Related questions

Disable scrolling in all mobile devices

This sounds like there should be a solution for it all over the internet, but I am not sure why I cannot find it. I want to disable Horizontal scrolling on mobile devices. Basically trying to achieve this: body{ overflow-x:…

Read More
screen styling when virtual keyboard is active

Ideally, i would want the entire interface to have a custom styling that is seen on the ios (itouch / ipad) or android equivalent with the virtual keyboard present. See below for more details. A custom set CSS hacking rules to …

Read More
Mobile Web - Disable long-touch/taphold text selection

I've seen/heard all about disabling text selection with the variations of user-select, but none of those are working for the problem I'm having. On Android (and I presume on iPhone), if you tap-and-hold on text, it highlights it and …

Read More