javascript - parpadear - CSS3 transforma causa parpadeo de la pantalla o fuente con alias

parpadeo de pantalla windows 7

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 deseo ampliarlas haciendo clic (escala) o voltear sobre ellas (rotarY) al aplicar clases CSS con algún 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 solo uso rotateY(180deg) en :hover .

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

El problema es que la pantalla parpadea de forma aleatoria cuando el zoom o el giro y algunas fuentes de la página están alteradas y se ven feas, pero no todas, es realmente extraño.

Aquí hay un jsfiddle para que puedas ver el problema por ti mismo:

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

Ya probé el truco de -webkit-backface-visibility , el parpadeo ha desaparecido en las combinaciones y las transformaciones, 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

Intenta agregar lo siguiente a tu CSS:

-webkit-transform: translateZ(0);

Esto forzará la aceleración de hardware para Chrome, ya que Chrome a menudo decide no usarlo basándose en el CSS.

Answer 2

Si pudieras poner ejemplos en un jsfiddle, las capturas de pantalla no hacen un buen trabajo para 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 sucediendo.

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 en los que no se realizó la transición o incluso en el mismo contenedor, se realizaron de manera aparentemente aleatoria e inconsistente.

algo como.

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

Me encantaría proporcionar una explicación de lo que hace preserve-3d, sin embargo, encontré la documentación bastante ambigua.

Acerca del quid de lo que he recopilado es que puede solucionar el problema (lo que hizo) y tiene dos propiedades

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

Plano se utiliza por defecto.

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

Si hay alguien que trabaje en webKit, ¿puede proporcionar una explicación de lo que realmente hace?

Answer 3

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

Simplemente agregue la clase .no-flickr a cualquier objeto problemático 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);
}

Answer 4

Veo que tu texto es simplemente anti-anulado. Intente agregar la transformación 3d, por ejemplo, rotateZ(0) para solucionarlo.