lag terribile in Chrome quando si utilizza effetto di parallasse

Question

prima di tutto, ecco un link al mio sito web, avendo il problema che sto per descrivere:

http://themes.roussounelosweb.gr/cassiopeia/

In Firefox, IE 9, Opera, Safari , iOS il sito Web sembra perfetto e funziona senza intoppi. Il problema si trova con i dispositivi Chrome e Android, in cui lo scorrimento è incredibilmente lento e le immagini di sfondo che utilizzano un effetto di parallasse si stanno animando rapidamente.

Sospetto che il problema riguardi le dimensioni in background: copertina e allegato in background: attributi fissi delle mie immagini, ma devo ancora trovare una soluzione a questo problema.

Potete vederlo direttamente e avere un'idea migliore sul link qui sopra. Per favore aiuto; Sono agli ultimi passi per finire questo progetto, e questo bug mi sta davvero trattenendo.

section{ 

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
background-attachment:fixed; 
overflow:hidden; 
} 

section.section1{ 

background-image:url(../img/section1.jpg); 
background-repeat:no-repeat; 
color:#dedede; 
text-shadow:1px 1px 5px rgba(0,0,0,0.8); 
position:relative; 
padding:20px 0px; 
z-index:1; 
overflow:hidden; 
} 

Answer 1

Non credo il problema è nel CSS, ma piuttosto nel JS.

Per prima cosa, vedo che stai usando nicescroll insieme a parallax.js. Potrebbero essere i due in conflitto - prova a rimuovere nicescroll dal tuo JS e controlla se è meglio.

In secondo luogo, analizzare la vostra attività con cornice temporale strumento di sviluppatori, si può vedere il punto esatto in cui i fotogrammi cadono:

Stai sparando 33 timer quando si sta scorrendo. Probabilmente potresti provare a eseguire il debug di un po 'del tuo codice, separando un callback alla volta dall'evento di scroll e verificando quale sia il problema.

UPDATE:

Credo che Robert capito bene nei commenti: gli sfondi sono pesante. Dal momento che è già una grande e intensiva pagina della CPU, suppongo che il browser gestisca con difficoltà la parallasse su elementi così grandi. Cerca di comprimere, comprimere e salvare con una qualità inferiore.