Transformación de CSS3 que afecta a otros elementos con chrome/safari

Tengo un problema en el que mis transformaciones css3 están afectando a otros elementos en la página e incluso causando que parpadeen. Vi otra publicación sobre esto, pero no tenían una resolución con el problema.Transformación de CSS3 que afecta a otros elementos con chrome/safari

http://scosha.mybigcommerce.com/w107b/ cuando te desplazas sobre la navegación ves una transformación css3 animada. Funciona bien en Firefox sin parpadeo pero con cromo y safari el efecto es muy obvio, lo ves en los elementos del menú desplegable, así como en el texto del pie de página.

Fuente

2012-10-10 mfdeath

funciona completamente bien - Chrome 24 en Mac –

he probado en un safari/cromo en varios Mac, el efecto fue realmente peor en Safari. – mfdeath

enlace está muerto. pero de todos modos, experimento lo mismo en Chrome 24 en mi PC. – vsync

Esto es a known issue con texto de Macintosh en Chrome 22 (y aparentemente Safari). La aceleración de GPU hace que MacOS cambie de antialiasing de subpixel a escala de grises, lo que hace que el peso de la fuente parezca disminuir notablemente.

Actualización:

Como señala el OP a continuación, la solución es aplicar -webkit-font-smoothing: antialiased - en escala de grises que se aplica el suavizado en todo momento. Si hace esto, probablemente desee aumentar los grosores de fuente en todo, ya que el texto anti-alias de escala de grises se ve notablemente más delgado que el subpíxel

Puede obtener el mismo efecto aplicando propiedades que causan que el contenido siempre estar acelerado por la GPU (como la visibilidad de la parte trasera: oculto), pero dado que no se garantiza que aceleren la GPU en futuras versiones del navegador, es más fácil verificar el futuro para simplemente especificar la escala de grises.

Fuente

2012-10-11 00:31:16

Gracias tío encontré lo que estaba buscando. Para aquellos de ustedes que terminan aquí desde la esfera de Google: -webkit-font-smoothing: antialiased; parece que resolvió el problema. – mfdeath

Probablemente vale la pena señalar que establecer -webkit-font-smoothing: subpixel-antialiased; logrará lo mismo sin hacer que el tipo parezca más delgado. –

O [no use '-webkit-font-smoothing: antialiased'] (http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/) –

-3

Estaba teniendo el mismo problema en Chrome pero no en Firefox.

La solución temporal consiste en añadir una solución web-kit y retire la transición:

-webkit-transition: none;

Fuente

2012-10-13 01:48:31 Mike

Solución de trabajo para el parpadeo de los elementos durante la transición en Chrome es la creación de CSS para el nodo padre:

-webkit-backface-visibility: hidden;

Fuente

2013-11-06 16:19:37 zajc

Me parece que esto simplemente configura la representación de fuente para antialiasing en escala de grises. – enyo

Esto funciona para mí cuando se agrega al elemento parpadeante (no al elemento principal). –

La solución para mí fue aplicar el fuelle css al padre de todos los elementos afectados.

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

Fuente

2015-01-09 15:27:01 Bema

Me funciona solo con '-webkit-transform: translate3d (0,0,0);' también. –

Transformación de CSS3 que afecta a otros elementos con chrome/safari

Respuesta

Cuestiones relacionadas