Dlaczego ten CSS nie działa w Chrome na Androida, ale działa wszędzie indziej?

Question

To naprawdę mnie zastanawia. Chcę, aby pic.jpg był statyczny w tle (nie przesuwaj podczas przewijania) i nie rozciągał się.

To działa na każdej przeglądarce (tj Chrome, Safari, Firefox) z wyjątkiem Chrome na Androida (działa nawet na Android oryginalnym przeglądarce)

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 dla Androida renderuje go jako pic.jpg będąc w połowie drogi ekran, nie na całej stronie i nie pozostaje statycznie na przewijaniu ..

Nie mogę odtworzyć go na jsfiddle, staram się również debugować go za pomocą mojego telefonu z Androidem i nic nie pomaga.

Czy to nie jest sposób na stworzenie obrazu tła?

Answer 1

Nie chcę być okrutna, ale ten problem został zgłoszony około 4 lat temu

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

najnowsza odpowiedź może pomóc Chyba:

W moich doświadczeniach z Androida, ja zauważyłem, że wszystkie inne DIV w ciele zachowywały się poprawnie, włączając w to centrowanie, więc przeniosłem obraz do innego DIV i zadziałało.

Zabawny.

najlepiej

Answer 2

Znalazłem obejście sprawia, że ​​wyświetlacz tła poprawnie na Chrome dla Androida: define tle w tagu HTML, nie ciało. Oto nowe 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. Z mojego doświadczenia wynika, że ​​tło nadal działa poprawnie w każdej innej przeglądarce.

Answer 3

mam podobny problem .. a ja go naprawić z tym

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