19 votos

CSS3 transforma causar parpadeo de la pantalla o con el alias de fuente

Estoy tratando de aplicar algunas transformaciones CSS3 en los elementos y hay dos problemas. La página web contiene una gran cantidad de notas adhesivas y quiero acercar haga clic en (escala) o flip on hover (rotateY) mediante la aplicación de las clases CSS con JavaScript.

Por ejemplo, el zoom de la clase es como este :

.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 de volteo yo sólo uso rotateY(180deg) a :hover.

Cada código tiene un valor predeterminado de rotación de 6deg aplicada y yo falso rotación aleatoria con la nth-child CSS3 selector de aplicar diferentes rotaciones.

El problema es que la pantalla parpadea al azar cuando se utiliza el zoom o dar la vuelta y algunas fuentes de la página se alteran y se ve feo, pero no todos ellos, eso es muy raro.

Aquí es un jsfiddle así que usted puede ver el problema por sí mismo :

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

Ya he probado el -webkit-backface-visibility truco, el parpadeo se ha ido en aminations y transforma seguro pero fuentes aspecto feo todo el tiempo.

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

16voto

AshHeskes Puntos1271

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

Sin embargo, he experimentado un problema similar, no podía encontrar la causa del problema. O vienen con una explicación de por qué puede estar pasando.

Sin embargo, me hizo encontrar una solución que funcionó en mi caso.

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

He aplicado en todos los elementos que parecían tener problemas de representación. En mi caso algunos elementos que no siendo la transición o incluso en el mismo recipiente, donde se efectúa en un aparentemente al azar y de forma contradictoria.

algo como.

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

Me encantaría dar una explicación en cuanto a lo preserve-3d, sin embargo, no he encontrado la documentación bastante ambigua.

Acerca de la esencia de lo que deduje es que se puede solucionar el problema ( que lo hizo ) y que tiene dos propiedades

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

Plana se utiliza por defecto.

Lo siento, no podría dar una respuesta más detallada, pero espero que esto soluciona el problema para usted.

Si cualquier persona que trabaja en webKit es todo, puede usted proporcionar y explicación de lo que esto realmente hace.

9voto

Semyazas Puntos1911

Intente agregar el siguiente CSS:

-webkit-transform: translateZ(0);

esta será la fuerza de la Aceleración de Hardware para chrome, ya que chrome a menudo decide no utilizar se basa en el CSS

2voto

Artem Medvedev Puntos21

Tengo el mismo problema. Encontrar la solución de tiempo muy largo, pero por fin lo he encontrado.

Sólo agregar clase .no-flickr a cualquier problema objeto en su sitio y ves correcto de animación sin ningún tipo de errores.

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);
}

1voto

bjornd Puntos11457

Veo que el texto es sólo suavizados. Intente agregar transformación 3d por ejemplo rotateZ(0) a arreglar eso.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: