Area bianca su sfondo fisso quando si scorre su ios

Il mio obiettivo è avere uno sfondo in scala su iOS/Android che non deve ridimensionare dopo che l'utente scorre verso il basso (e la barra degli indirizzi scompare). Ho trovato diverse domande con risposte utili ma in qualche modo continuo ad avere comportamenti fastidiosi sul mio iPhone. Io uso Bootstrap.Area bianca su sfondo fisso quando si scorre su ios

Ecco la mia semplificata HTML

<html> 
<body> 
    <div id="background-img"></div> 
    <div id="layout" class="container"> 
    <div id="content-main" class="col-xs-12"> 
     <p>Some text here</p> 
    </div> 
</div> 
</body> 
</html>

Ecco il mio css

html { 
    height: 100%; } 

body { 
    position: relative; 
    /* required for scrollspy */ 
    font-family: Arial, Helvetica, Sans-Serif; 
    font-size: 30px; 
    font-weight: normal; 
    height: 100%; 
    color: white; 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
    /* smooth scrolling on ios */ } 

#background-img { 
    width: 100%; 
    top: 0; 
    left: 0; 
    bottom: -80px; 
    position: fixed; 
    z-index: -1; 
    background: url("http://www.casapanorama.nl/sites/all/themes/casapanorama/images/bg-klaprozen-1-w1000.jpg") no-repeat center center; 
    background-size: cover; 
} 
#content-main { //nothing fancy }

Tutto funziona bene su desktop. Ma quando apro il sito su ios (chrome o safari - non fa alcuna differenza) ottengo una barra bianca nella parte inferiore dello schermo quando scorro verso il basso. La barra scompare quando lo scorrimento si è interrotto. Puoi provarlo tu stesso sul cellulare al: https://jsbin.com/rudetokoxu

Ho provato le soluzioni pubblicate qui: CSS background stretches to fill height in iOS but there is white space on scroll. La soluzione qui sembra logica. Ho anche provato a impostare l'altezza dello sfondo div al 200% ma senza successo.

cercato anche: mobile IOS Google chrome address bar behaviour e qui: Background image jumps when address bar hides iOS/Android/Mobile Chrome comprese le soluzioni js (sembrava che alcuni di loro non ha funzionato più così non ho provato tutte le soluzioni js) e qualsiasi altra cosa che ho trovato su questo argomento

si prega di aiutarmi a risolvere questo o mi convince mai a pensare due volte prima di anoying piccole cose come queste (cos la vita è piena di loro :-))

BTW: questo sito ha lo stesso problema sul cellulare: http://www.laregiondesmusees.fr, ma questo sito non soffre: http://www.heartkids.co.nz

fonte

2015-09-05 jzp74

Sento il tuo dolore. Se osservate attentamente l'esempio che avete trovato dove non c'era alcun problema di spazio bianco (http://www.heartkids.co.nz) - la risposta era lì, ma difficile da trovare se non sapete cosa state cercando.

Vedrete che hanno applicato una trasformazione 2d sull'immagine di sfondo. Nella maggior parte dei casi l'applicazione di una trasformazione 2d o 3d su div fissi con immagini di sfondo elimina lo spazio bianco indesiderato come questo.

Questo CSS dovrebbe rimuovere quella fastidiosa barra bianca. Saluti.

.background-img { 
    transform: translate3d(0,0,0); 
}

fonte

2015-10-20 20:20:56 user3621874

Bit di una risposta in ritardo ma grazie! Sembra che il comportamento che ho visto sia su Chrome sia su Safari su iOS non esista più in Chrome. Posso ancora riprodurre in Safari ma il tuo suggerimento in combinazione con alcuni degli altri suggerimenti che ho citato nel mio post originale risolvono il problema. – jzp74

Grazie mille per questa risposta. Molto meglio dei 1000 di js hack là fuori. Saluti! –

Area bianca su sfondo fisso quando si scorre su ios

risposta

Problemi correlati