html - translatex - El texto de Webkit parpadea cuando se utiliza la transformación CSS(escala)

transform translatey

Question

Esto sucede en Safari 6 en Mountain Lion y en el último cromo. (Confirmado en OSX, podría no suceder en Windows)

Por favor vea esta página para ver un ejemplo:

http://users.telenet.be/prullen/flicker2.html

Mueva rápidamente el mouse para encender y apagar la imagen y observe el texto a continuación. Lo verás parpadear / palpitar.

El CSS asociado está abajo. No puedo hacer ningún cambio en las clases .out y .in . Sólo a la clase de artículo.

He intentado agregar -webkit-backface-visibility:hidden; Como leí en alguna parte, eso debería arreglarlo, pero no ha hecho ninguna diferencia.

¿Alguien tiene una pista?

Gracias wesley

.out {                                      
   position:        relative;                                       
   display:        block;                                      
   margin:            0;                                      
   border:            0;
   padding:        0;                                      
   margin-left:    auto;                                       
   margin-right:    auto;                                      
   overflow:        hidden;    
 }
.in {                                   
   position:        relative;                                       
   display:        block;                                      
   margin:            0;                           
   padding:        0;                            
   border:            0;
   overflow:        hidden;
}
.item {
   margin: 60px;
   -webkit-transition: -webkit-transform .15s linear;
   -moz-transition: -moz-transform .15s linear;
   -o-transition: -o-transform .15s linear;
   transition: transform .15s linear;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -o-transform-style : preserve-3d;
   -ms-transform-style : preserve-3d;
}
.item:hover {
   -webkit-transform: scale(1.3) !important;
   -moz-transform: scale(1.3) !important;
   -o-transform: scale(1.3) !important;
   -ms-transform: scale(1.3) !important;
   transform: scale(1.3) !important;
}

Answer 1

He tenido el mismo problema esta mañana y descubrí que la mejor solución era:

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

Agregué esto a cada uno de los dos elementos que forman las caras del objeto de dos lados. Detuvo el parpadeo en Chrome y corrigió la cara posterior que se muestra en Safari.

Answer 2

Me enfrento al mismo problema: quiero escalar un elemento al desplazar el mouse y, al hacerlo, cada texto de la página parpadea. También estoy en la última versión de Chrome (21.0.1180.89) y OSX Mountain Lion.

En realidad, añadiendo

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

A los elementos afectados resuelve el problema.

Usted dijo que no puede cambiar las clases .in y .out, pero tal vez puede agregar otra (.no-flicker) y usarla en los elementos afectados.

Nota: esto realmente parece ayudar a solucionar el problema en Chrome, pero tenga en cuenta que puede causar algunos problemas en Safari si tiene elementos en capas con z posicionamiento de las propiedades CSS. Por ejemplo, en mi sitio está causando que un elemento CSS parpadee detrás de las transiciones de diapositivas de la presentación de diapositivas animada que estoy tratando de limpiar.

Answer 3

Tengo el mismo problema, pero arréglalo. Consulte este http://codepen.io/artemmedvedev/pen/uLwvo

Simplemente agregue la clase .no-flickr a cualquier elemento parpadeante o parpadeante en su proyecto

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