css - style - border radius top
Webkit border-radius y desbordamiento de errores al usar cualquier animación/transición (5)
Agregué menos el valor del índice z para la imagen y un valor más alto para el padre
li {z-index:10; overflow: hidden;}
li img {z-index: -10;}
Estoy teniendo un error extraño cuando uso una combinación de overflow , border-radius y transition . Tengo un div con un img dentro de ella. El div tiene un radio de borde y desbordamiento establecido en oculto. Cuando me coloco sobre el img, tengo una transición que se realiza que hace que la imagen sea más grande para crear un efecto de zoom. El problema es que el desbordamiento parece romperse en la parte inferior izquierda y en la parte inferior derecha de la imagen.
He creado un jsfiddle para que veas de lo que estoy hablando. http://jsfiddle.net/dmcgrew/HuMrC/1/
Funciona bien en Firefox pero se rompe en Chrome y Safari.
¿Alguien sabe qué podría estar causando esto o cómo solucionarlo?
He tenido un problema en el pasado como este al intentar ampliar una foto dentro de un div. Lo arreglé agregando una scale(1.05) rotate(0.02deg) rotación scale(1.05) rotate(0.02deg) a la transformación de la escala (en realidad eliminó las líneas de falla)
Mi problema de hoy es hacer que las líneas de falla se conviertan en un efecto de desplazamiento de div de YY. Sorprendentemente, me deshice de ellos eliminando el overflow: hidden;
Esperemos que esto ayude a los futuros depuradores.
La respuesta aceptada no me funcionó porque no puedo hacer que el borde claro aumente el área en la que se puede hacer clic en el elemento enmascarado, ni tampoco quiero que oculte el de otros elementos (y no se resolvió la configuración de la altura al 100%) la cuestión).
Ver mi respuesta a una pregunta relacionada para una posible solución.
No sé si estoy entendiendo el problema correctamente ya que la imagen no se está cargando. Si añades height: 100%; ¿A .inner_block le ayuda su problema?
Tuve el mismo problema exacto Agregar esto al contenedor principal lo resolví por mí (esto es una mezcla MENOS).
.transitionfix() {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0)
}