Chrome decodifica un'immagine grande ogni fotogramma

Question

Sto provando a fare una mappa interattiva, dove sto usando due immagini molto grandi (3200x800 e 4096x1024 pixel). Il problema è che Chrome decodifica l'immagine con nuvole ogni fotogramma ... quindi le prestazioni sono davvero scadenti (esempio in snippet).

Trovato problema simile here, ma non ha aiutato. Sto usando Chrome 43 (64-bit) su Linux Mint 17.1 (64-bit). Ho anche provato Firefox e senza problemi ...

html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    position: absolute; 
 
    width: 3200px; 
 
    height: 1800px; 
 
    background: url('http://i.imgur.com/p1Jf722.png'), url('http://i.imgur.com/zUkgN3j.jpg'); 
 
    animation: clouds 200s linear infinite; 
 
    transition: 5s; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
@keyframes clouds { 
 
    from { background-position: 0 0, left top; } 
 
    to { background-position: 4096px 0, left top; } 
 
} 
 

 
body:hover > div { 
 
    left: -500px; 
 
    top: -250px; 
 
}

<div></div>

Answer 1

Utilizzando un elemento pseudo e trasformare ancora usa un sacco di CPU, ma è abbastanza liscia. Ed elimina assolutamente le decodifiche dell'immagine.

Penso che Chrome stia utilizzando un singolo buffer per uno sfondo div. Quando cambi le posizioni relative delle 2 immagini in questi buffer, diventa non valido e deve essere nuovamente sottoposto a rendering decodificato. Probabilmente FF può allocare un buffer intermedio per ogni immagine, anche se utilizzato nella stessa sfondo

html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    position: absolute; 
 
    width: 3200px; 
 
    height: 1800px; 
 
    background: url('http://i.imgur.com/zUkgN3j.jpg'); 
 
    transition: 5s; 
 
    left: 0; 
 
    top: 0; 
 
    background-position: left top; 
 
    transform: translateZ(0px); 
 
} 
 

 
div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url('http://i.imgur.com/p1Jf722.png'); 
 
    animation: clouds 200s linear infinite; 
 
    transition: 5s; 
 
    left: 0; 
 
    top: 0; 
 
    transform: translateZ(0px); 
 
} 
 

 

 
@keyframes clouds { 
 
    from { background-position: 0 0; } 
 
    to { background-position: 4096px 0; } 
 
} 
 

 
body:hover > div { 
 
    left: -500px; 
 
    top: -250px; 
 
}

<div></div>

Answer 2

Probabilmente ci sono diversi modi per fare migliorare le prestazioni qui, ma il più basso di frutta impiccagione è solo di scaricare tutto sulla GPU con l'aggiunta di un trasformazione non distorcente per il tuo div. Voilà, non più decodifica immagine.

html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    position: absolute; 
 
    width: 3200px; 
 
    height: 1800px; 
 
    background: url('http://i.imgur.com/p1Jf722.png'), url('http://i.imgur.com/zUkgN3j.jpg'); 
 
    animation: clouds 200s linear infinite; 
 
    transition: 5s; 
 
    left: 0; 
 
    top: 0; 
 
    transform: translateZ(0); 
 
} 
 

 
@keyframes clouds { 
 
    from { background-position: 0 0, left top; } 
 
    to { background-position: 4096px 0, left top; } 
 
} 
 

 
body:hover > div { 
 
    left: -500px; 
 
    top: -250px; 
 
}

<div></div>