L'animazione CSS si blocca solo su Safari su iPad

Question

Il mio sito si arresta in modo anomalo in Safari su iPad e solo su iPad. Sto animando una grande immagine (4800 x 374 pixel, sebbene solo 336 kb) nell'intestazione con un'animazione css3. Dopo una decina di secondi, questo provoca l'arresto anomalo di Safari.

Potete vedere il sito in http://bakabaka.nl/preview/leuk/

Posso impedire che questo incidente, e se sì, come? Posso rendere più scorrevole l'animazione? Adesso è molto frastagliato ...

Answer 1

Questo è uno sparo nel buio, ma forse ne vale la pena.

Quello che vorrei provare è quello di utilizzare un'animazione 3D su iOS in quanto utilizza l'accelerazione hardware:

-webkit-transform: translate3d(X,Y,Z); 

Vedi qui per maggiori informazioni: '3D Transform Functions'

Inoltre ci possono verificarsi alcuni problemi con molto immagini di grandi dimensioni su iOS. Forse sarebbe una soluzione migliore per tagliarli a pezzi. Per saperne di più: "Know iOS Resource Limits"

Answer 2

Stavo sperimentando qualcosa di simile pure. Per chiunque altro che sbatteva la testa contro un muro, questo stava bloccando Safari sia sul desktop che su iOS. Si davvero non piace quel selettore ::window-inactive.

::-webkit-scrollbar-thumb:window-inactive { 
    background: #f2f2f2; 
}