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

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


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


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

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


I have found a workaround that makes the background display correctly on Chrome for Android: define the background in the html tag, not the body. Here is the new css:

html{    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;}

And yes, this is valid markup. In my experience, the background still works correctly in every other browser too.