Safari che modifica i pesi dei font quando sono in esecuzione animazioni non correlate

Question

Sto utilizzando le animazioni CSS nella mia pagina e Safari sembra modificare i pesi dei font non correlati altrove nella pagina quando le animazioni sono in esecuzione. Qualche idea del perché accada questo? Tutti gli altri browser funzionano bene, compresi quelli di Webkit come Chrome.

ho dettagliato il bug in un video qui - http://www.screenr.com/gZN8

Il sito è anche qui - http://airport-r7.appspot.com/ ma potrebbe continuare a cambiare rapidamente.

Uso la bussola (@ transition-property, @ transition-duration) sulle icone delle frecce. Nessuna transizione applicata sull'intestazione che lampeggia. Su un Mac - quindi potrebbe essere l'accelerazione hardware, ma sto ancora cercando di capirlo.

Answer 1

Quando si attiva il compositing GPU (ad esempio, tramite l'animazione CSS), il browser invia quell'elemento alla GPU, ma anche qualsiasi cosa che dovrebbe apparire sopra quell'elemento se le sue proprietà superiore/sinistra sono state modificate. Ciò include qualsiasi posizione: gli elementi relativi che appaiono dopo quello animato.

La soluzione è fornire la posizione dell'elemento di animazione: relativo e uno z-index che lo colloca sopra ogni altra cosa. In questo modo si ottiene l'animazione ma si mantiene il rendering del carattere sub-pixel (superiore IMO) su elementi non correlati.

Ecco una demo del problema e la soluzione http://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1

Aggiornamento: Le versioni più recenti di Chrome conservano sub-pixel antialiasing sulla GPU elementi mescolati fino a quando l'elemento non ha trasparenza, ad esempio, ha un background senza trasparente o pixel semitrasparenti. Nota come cose come il raggio di confine introducono pixel semitrasparenti.

Answer 2

Apparentemente, questo è il prezzo che si paga per l'accelerazione hardware: tutto il testo si trasforma momentaneamente in immagini, il che causa il calo della qualità del rendering.

Tuttavia, l'applicazione di html {-webkit-font-smoothing: antialiased} per disattivare l'anti-alias del sottopixel fa si che questo problema si risolva. Questo è quello che sto facendo per ora.

AGGIORNAMENTO: Da allora, ho anche imparato che ciò accade solo quando il browser non può essere sicuro che la sezione animata abbia effetto sul testo. Di solito questo può essere gestito avendo il testo sopra (più alto z-index) gli elementi che si animano e/o assicurandosi che il testo abbia uno sfondo completamente opaco.

Answer 3

Ho affrontato questo problema molte volte e hanno avuto successo aggiungendo il seguente CSS all'elemento animato:

z-index: 60000; 
position: relative; 

Sembra di cui ha bisogno sia z-index e posizione per essere efficace. Nel mio caso lo stavo usando con i filatori animati Font Awesome.