Tengo un problema con la propiedad de visibilidad posterior. Funciona como quiero en Safari/Chrome, pero por alguna razón no funciona correctamente en Firefox.Cara posterior: la visibilidad no funciona correctamente en Firefox (funciona en Safari)
Cuando voltea la caja, me sale una imagen especular de la cara frontal:
Enlace al sitio: http://www.ericouture.com/
Trate de poner 'cara trasera visibilidad: oculto' tanto en el objeto y su recipiente. Esto es lo que funcionó para mí con este error
Este problema se corrigió en firefox hasta v30. La última versión v31 tiene el mismo problema surgiendo. La solución proporcionada funcionó para mí también. Gracias. – Ninz
Desafortunadamente, agregar 'backface-visiblity: hidden' en el contenedor hace que la parte posterior no responda en Chrome. –
Tengo el mismo problema con el iPhone 6, Safari. En la mayoría de los casos, no veo ninguna razón para no aplicar 'backface-visibility: hidden' al cuerpo, para conectar en cascada a todos los elementos (aparte de donde sea necesario). – Sablefoste
Este error ha sido acknowledged by Mozilla.
La solución es agregar transform: rotateX(0deg) a los objetos frontal y posterior.
Agregar backface-visiblity:hidden en el contenedor, como lo sugiere @yalia, hace que la parte posterior no responda en Chrome, por lo tanto, se debe evitar esa corrección.
Aquí hay un fiddle con la solución.
Usar 'transform: rotateX (0deg)' corregir el mismo error que tuve en Safari – mems
nice transform: rotateX (0deg) funcionó como un encanto <3 –
Tuve un comportamiento diferente. Añadiendo transformada: rotateX (0deg) a ambas caras ocultó la parte de atrás, pero agregarlo al frente me funcionó bien. – AyexeM
¡Tengo exactamente el mismo problema en Firefox 10.0.2! Parece que la propiedad se aplica solo a la cara frontal, pero cuando se voltea con un giro de 180 grados, la cara posterior ya no tiene la propiedad aplicada. ¡¿Alguien tiene una solución para esto?! – Mark