Trasformazione CSS3 che interessa altri elementi con chrome/safari

Ho un problema in cui le mie trasformazioni css3 stanno effettuando altri elementi sulla pagina e causandone anche lo sfarfallio. Ho visto un altro post su questo, ma non avevano una risoluzione con il problema.Trasformazione CSS3 che interessa altri elementi con chrome/safari

http://scosha.mybigcommerce.com/w107b/ quando si scorre sulla navigazione si vede una trasformazione animata css3. Funziona perfettamente in Firefox senza sfarfallio ma con chrome e safari l'effetto è molto evidente, lo si vede nelle voci del menu a discesa e nel testo del piè di pagina.

fonte

2012-10-10 mfdeath

E funziona tutto bene - Chrome 24 su Mac –

Ho testato in un safari/cromo su diversi Mac, l'effetto è stato in realtà peggiore in Safari. Il collegamento – mfdeath

è morto. ma in ogni caso, ho sperimentato lo stesso su Chrome 24 sul mio PC. – vsync

Questo è a known issue con il rendering del testo Macintosh su Chrome 22 (e apparentemente Safari). L'accelerazione della GPU fa sì che MacOS passi dall'antialiasing da subpixel a scala di grigi, il che fa sì che il peso del font appaia sensibilmente diminuito.

Aggiornamento:

Come osserva OP sotto, la correzione è di applicare -webkit-font-smoothing: antialiased - che si applica in scala di grigi di anti-aliasing in ogni momento. Se lo fai, probabilmente vorrai aumentare il peso dei font in tutto il testo poiché il testo anti-alias in scala di grigi appare notevolmente più sottile del sub-pixel

È possibile ottenere lo stesso effetto applicando proprietà che causano il contenuto sempre essere accelerato dalla GPU (come back-face-visibility: hidden) ma poiché non è garantito che ciò causi l'accelerazione della GPU nelle future versioni del browser, è più probabile che sia in futuro sufficiente specificare la scala dei grigi.

fonte

2012-10-11 00:31:16

Grazie amico ho trovato quello che stavo cercando. Per quelli di voi che finiscono qui dalla googlesphere: -webkit-font-smoothing: antialiased; sembra aver risolto il problema. – mfdeath

Probabilmente vale la pena notare che l'impostazione -webkit-font-smoothing: subpixel-antialiased; otterrà la stessa cosa senza che il tipo appaia più sottile. –

Oppure [non utilizzare '-webkit-font-smoothing: antialiased'] (http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/) –

-3

Avevo lo stesso problema in Chrome ma non in Firefox.

La soluzione temporanea è di aggiungere una correzione web-kit e rimuovere la transizione:

-webkit-transition: none;

fonte

2012-10-13 01:48:31 Mike

Soluzione di lavoro per gli elementi di sfarfallio durante la transizione in Chrome è impostare i CSS per il nodo principale:

-webkit-backface-visibility: hidden;

fonte

2013-11-06 16:19:37 zajc

Mi sembra come se questo semplicemente imposta il rendering dei font in antialiasing in scala di grigi. – enyo

Questo funziona per me quando aggiunto all'elemento di sfarfallio (non al genitore). –

La soluzione per me era applicare il muggito css al genitore di tutti gli elementi interessati.

-webkit-transform-style: preserve-3d; 
-webkit-transform:translate3d(0,0,0);

fonte

2015-01-09 15:27:01 Bema

Funziona per me con solo '-webkit-transform: translate3d (0,0,0);' anche. –

Trasformazione CSS3 che interessa altri elementi con chrome/safari

risposta

Problemi correlati