css - inspeccionar - Chrome no vuelve a dibujar<div> después de que está oculto
inspect element chrome (2)
Claramente, este es un error de WebKit.
Encontré que agregar -webkit-transform: scale3d(1,1,1); lo arregla:
http://jsfiddle.net/thirtydot/y7NdR/5/
No estoy seguro de si hay algún inconveniente en esta solución. Supongo que esto funciona porque dentro de WebKit, se usa un código diferente para renderizar transformaciones 3D.
Tengo algunos div que aparecen en el vuelo estacionario, y luego están ocultos. Sin embargo, en Chrome (19.0.1084.56 m, Windows XP) cuando desalojas Chrome, no los vuelve a dibujar como desaparecidos hasta que hagas algo así como desplazarte o cambiar el tamaño de la ventana.
Soy consciente de que ciertas modificaciones en mi CSS solucionarán el problema, por ejemplo, eliminar la position o las propiedades de overflow y z-index , pero realmente no quiero hacer eso: JSfiddle está emparejado desde un sitio completo donde necesito ellos.
¿Alguien puede arrojar alguna luz sobre por qué este problema de redibujado está sucediendo en Chrome? ¿Alguien tiene algún consejo para solucionarlo sin jugar con el CSS que necesito?
-webkit-transform: scale3d(1,1,1); con esto durante mucho tiempo, y al agregar -webkit-transform: scale3d(1,1,1); arreglé mi problema, quería saber POR QUÉ. Entonces, profundicé en mi código para tratar de reducir mi problema. Descubrí que estaba usando un fundido de animación, y dentro de esto, incluí en la misma clase:
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
Eliminar estas dos líneas solo, solucionó mi problema sin el hack de transformación de escala.
Viendo que la visibilidad de la cara posterior tiene que ver con las transformaciones, y no debería tener ningún efecto sobre las transformaciones 2D, la eliminé y solucionó mis problemas por completo.
Se han notado muchos errores con visibilidad de la cara posterior con Chrome, así que publiqué esto para cualquier persona futura que intente encontrar una solución sin demasiado trabajo.