Why does this CSS not work for Chrome on Android but works everywhere else?

Question

This really puzzles me. I want to have pic.jpg be static in the background (not move when scrolling) and that it won't stretch.

It works on every browser (i.e. Chrome, Safari, Firefox) except Chrome on Android (it even works on Android original browser)

body{
        background-color: transparent !important;
        background-image: url(<%= asset_path "pic.jpg" %>);

        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

Chrome for Android renders it as pic.jpg being halfway up in the screen, not on the entire page and doesn't stay static on scroll..

I can't reproduce it on jsfiddle, I also try to debug it with my Android phone and nothing seems to help.

Isn't this the way to create the background image?

Answer 1

I do not wanna be cruel but this issue has been reported approximately 4 years ago

http://code.google.com/p/android/issues/detail?id=3301

most recent response can help I guess:

In my experiments with Android, I noticed that all the other DIVs within the body behaved correctly, including centering, so I moved image to another DIV and it worked.

Funny one.

best