Immagine di sfondo parallasse CSS Spazio bianco in IE

Question

Uso il metodo Keith Clark's CSS-only per creare un effetto di parallasse a due livelli in modo che l'immagine di sfondo scorra a una velocità inferiore rispetto al resto del contenuto del sito. Per essere chiari, l'immagine copre l'intera pagina e il contenuto si trova sopra di esso.

Il mio sito è diviso in due elementi principali div (e un contenitore div) - uno per l'immagine di sfondo e l'altro per il contenuto della pagina. Di seguito è riportato il codice che stavo usando per i diversi elementi div.

.container { 
    height: 100%; 
    overflow-x: hidden; 
    overflow-y: auto; 
    perspective: 1px; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 

.background { 
    background-image: url(images/background.jpg); 
    background-size: cover; 
    position: absolute; 
    /* margin-bottom: -200em; 
    overflow: hidden; */ 
    height: 200em; 
    left: 0; 
    right: 0; 
    transform: translateZ(-2px) scale(3); 
} 

.page-content { 
    transform: translateZ(0); 
} 

Senza le proprietà margin-bottom e overflow aggiunto, l'elemento di sfondo div finirebbe con l'avere uno spazio bianco verticale rimasto una volta che è stata impostata ad un'altezza sufficiente a coprire tutti i contenuti della pagina.

Dopo aver aggiunto il margine negativo, il problema è stato risolto in Chrome e un po 'in Firefox *, e ho aumentato l'altezza e il margine negativo dell'elemento div per essere molto più di quanto necessario per garantire che funzionasse per pagina diversa lunghezze.

IE 11 ha comunque lo spazio bianco lì. Normalmente la proprietà background-size: cover; rimuove qualsiasi spazio bianco, ma questo non funziona con l'effetto di parallasse.

Sai qualche modo per rimuovere lo spazio bianco che avrebbe funzionato per IE9 + e altri browser principali, o sono sfortunato?

Ecco uno JSFiddle con praticamente lo stesso codice del sito che sto creando.

* Firefox non ha uno spazio bianco, ma il margine negativo non funziona correttamente per tutte le lunghezze di pagina. Per le pagine più corte è possibile scorrere il modo in cui è passata la fine del contenuto della pagina. Potrei rimediare modificando l'altezza e il margine per ogni pagina, ma una soluzione globale sarebbe apprezzata se possibile.

Answer 1

Non c'è alcun modo per ottenere la parallasse CSS per lavorare in IE, ancora. Ma dal momento che i browser basati su Webkit come Chrome e Opera (non ho testato Safari) funzionano bene con la parallasse, è possibile indirizzare i browser Webkit e visualizzare lo sfondo della parallasse per loro, e visualizzare un codice diverso - senza parallasse - per altri browser.

In primo luogo, ho messo il codice di parallasse all'interno @media query, in questo modo:

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
    .container { 
    [rule contents] 
    } 

    .background { 
    [rule contents] 
    } 

    .page-content { 
    [rule contents] 
    } 
} 

Il primo attributo (-webkit-min-device-pixel-ratio:0) obiettivi tutti i browser basati su WebKit, ma dal momento che suppongo non tutte le versioni di browser Webkit sosterrà questo parallasse effetto, ho anche aggiunto il secondo attributo, che limita i browser a Chrome 29+ and Opera 16+ (ho escluso Safari solo per sicurezza, ma puoi anche fare il choose another hack che si rivolge a Safari se scopri che funziona).

Probabilmente sarebbe un'idea molto migliore usare feature detection, ma non ho ancora imparato JavaScript, e quanto sopra è una soluzione solo CSS.

Dopo aver inserito le regole di parallasse in una query @media, ho impostato una regola predefinita alternativa per l'elemento back div.

(se dividere il sito in anteriore e posteriore div elementi non è necessario, senza parallasse, impostare l'elemento posteriore div un'immagine di sfondo anziché body o html con elimina una tonnellata di lag.)

Per mantenere il più possibile la somiglianza con la versione parallasse, ho impostato l'immagine di sfondo su position: fixed.

Poiché i browser di leggere attraverso il file CSS top-down e applicare stili in questo ordine, è importante avere la .back regola di parallasse (ei suoi dintorni @media query) proveniente dopo lo standard, non-parallasse .back regola nel file. Ovviamente, mi sono assicurato che tutti gli attributi applicati alle regole standard e parallasse .back fossero presenti solo in quello predefinito per risparmiare spazio (sarebbero stati applicati dai browser Webkit insieme a regole aggiuntive nella parallasse). versione).

Answer 2

Penso che tu abbia qualche problema se il tuo obiettivo è quello di farlo funzionare su IE9. Questo funziona per me, ma non senza aumentare l'altezza delle dimensioni del div .back.

Questo funziona per me in IE9 e Chrome, ma si potrebbe desiderare solo alcuni condizionali di IE.

http://jsfiddle.net/Lawrg9mv/21/

Aggiunte:

.back { 
    height: 80em; 
    -ms-transform: translateZ(-2px) scale(3); 
} 

.front { 
    -ms-transform: translateZ(0); 
    z-index: 10; 
    position: relative; 
}