Perché questo CSS non funziona per Chrome su Android ma funziona ovunque?

Question

Questo mi irrita davvero. Voglio avere pic.jpg essere statico sullo sfondo (non muoverlo quando si scorre) e che non si allungherà.

Funziona su tutti i browser (ad esempio Chrome, Safari, Firefox) tranne Chrome su Android (funziona anche su Android del browser originale)

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 per Android rende come pic.jpg essendo a metà strada in lo schermo, non sull'intera pagina e non rimane statico sullo scroll ..

Non riesco a riprodurlo su jsfiddle, provo anche a eseguirne il debug con il mio telefono Android e nulla sembra aiutare.

Non è questo il modo di creare l'immagine di sfondo?

Answer 1

io non voglio essere crudele, ma questo problema è stato segnalato a circa 4 anni fa

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

risposta più recente può aiutare immagino:

Nei miei esperimenti con Android, ho ho notato che tutti gli altri DIV all'interno del corpo si sono comportati correttamente, incluso il centraggio, quindi ho spostato l'immagine su un altro DIV e ha funzionato.

Uno divertente.

migliore

Answer 2

ho trovato una soluzione che rende la visualizzazione dello sfondo in modo corretto su Chrome per Android: stabilire le conoscenze preesistenti nel tag html, non il corpo. Ecco il nuovo 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. Nella mia esperienza, lo sfondo funziona ancora correttamente anche in tutti gli altri browser.

Answer 3

ho il problema simile .. e posso risolvere il problema con questo

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