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?

Solution 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

Solution 2

I have the similar problem.. and I fix it with this

html{
 height:100%;
 min-height:100%;
}
body{
 min-height:100%;
}

Comments

[Trouble]

could you give us a link to this page? or at last similar example

[Nick Ginanto]

cruel? more like helpful. Shame it is 4 years and chrome for android still doesn't support a basic feature.. Even apple supports this.

[Piotr Mąsior]

'even apple', you made my day :-D just FYI, newest Magento admin signin area is not working on chrome(linux/windows tested) when other modern browsers has got not any problem. I have to confess that chrome is my favorite browser but some bugs start to remind me <god help us> IE6.

[bricker]

Setting the !important flag on the background-size attribute has also worked for me.