Transformaciones de CSS3 causa parpadeo de la pantalla o fuente con alias

Question

Estoy tratando de aplicar algunas transformaciones de CSS3 en los elementos y hay dos problemas. La página web contiene muchas notas adhesivas y quiero hacer clic para ampliar (escala) o activarlas (rotarlas) aplicando clases de CSS con algo de JavaScript.

Por ejemplo la clase de zoom es así:

.postit-container.enabled { 
    z-index: 15; 
    -webkit-transition: -webkit-transform 0.15s ease-in-out; 
    -moz-transition: -moz-transform 0.15s ease-in-out; 
    -o-transition: -o-transform 0.15s ease-in-out; 
    -ms-transition: -ms-transform 0.15s ease-in-out; 
    transition: transform 0.15s ease-in-out; 
    -webkit-transform: scale(1.25); 
    -moz-transform: scale(1.25); 
    -o-transform: scale(1.25); 
    -ms-transform: scale(1.25); 
    transform: scale(1.25); 
} 

Para el efecto flip Yo sólo uso rotateY(180deg) en :hover.

Cada stickies tiene una rotación predeterminada de 6deg aplicada y yo simulo rotación aleatoria con el selector nth-child CSS3 para aplicar diferentes rotaciones.

El problema es que la pantalla parpadea de forma aleatoria al hacer zoom o al voltear y algunas fuentes en la página se alteran y se ven feas pero no todas, eso es realmente extraño.

Aquí es una jsFiddle para que pueda ver el problema por sí mismo:

JSfiddle (probado con Google Chrome 12.0.742.122 en Mac OS X 10.6.8)

ya he intentado el truco -webkit-backface-visibility, el parpadeo se ha ido a aminations y se transforma con seguridad pero las fuentes se ven feas todo el tiempo.

Espero que alguien tenga un truco de magia, porque realmente no entiendo este comportamiento.

Answer 1

Podría poner ejemplos en un jsfiddle, las capturas de pantalla no hacen un buen trabajo al ilustrar el problema.

Sin embargo, he experimentado un problema similar, tampoco pude encontrar la causa del problema. O invente una explicación sobre lo que podría estar pasando.

Sin embargo, encontré una solución que funcionó en mi caso.

-webkit-transform-style: preserve-3d; 

Lo apliqué en todos los elementos que parecían tener problemas de representación. En mi caso, algunos elementos que no se transicionaban o incluso se encontraban en el mismo contenedor, se efectuaban de forma aparentemente aleatoria e inconsistente.

algo así como.

.header *, .sticky * { 
    -webkit-transform-style: preserve-3d; 
} 

me gustaría ofrecer una explicación de por lo preserve-3d hace, sin embargo me pareció la documentación bastante ambigua.

Sobre el quid de lo que me enteré es que puede solucionar el problema (que lo hizo) y tiene dos propiedades

-webkit-transform-style: preserve-3d; 
//and 
-webkit-transform-style: flat; 

plana se utiliza por defecto.

Lo siento, no pude darle una respuesta más detallada, pero espero que esto solucione el problema para usted.

Si hay alguien trabajando en webKit, puede darnos una explicación de lo que esto realmente hace.

Answer 2

intenta agregar el siguiente CSS:

-webkit-transform: translateZ(0); 

Esto obligará a la aceleración de hardware para el cromo, ya que el cromo menudo decide no usarlo basa en la CSS

Answer 3

veo el texto es sólo antialiased Intente agregar la transformación 3d por ejemplo rotateZ(0) para solucionar eso.

Answer 4

Tengo el mismo problema. Encontré una solución por mucho tiempo, pero finalmente la encontré.

Simplemente agregue la clase .no-flickr a cualquier objeto problema en su sitio y verá la animación correcta sin ningún error.

ver este http://jsfiddle.net/DaPsn/92/

.no-flickr {   
    -webkit-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    -o-transform: translateZ(0); 
    transform: translateZ(0); 
}