Error con transformar: escala y desbordamiento: oculto en Chrome

El borde transparente no funcionó para mí, pero para cambiar el índice z de .wrap div y la imagen funcionó (en mi caso, la imagen es de hecho un video)

Aquí está el css:

.videoContainer{
    overflow: hidden;
    z-index: 10;
}

video{
    margin-left: -55%;
    transform: scale(-1,1);
    -webkit-transform: scale(-1,1);
    -moz-transform: scale(-1,1);
    z-index: 0;
}

NOTA: vea el comentario de Jake Blues a continuación sobre la necesidad de tener un elemento posicionado para permitir que z-index funcione correctamente.

transform: translateZ(0); en el elemento de envoltura hizo el truco para mí.

Consulte Rendimiento CSS relativo a translateZ(0) para obtener más información sobre esta técnica.

Ambas formas de resolver este emisor funcionaron bien:

1. Agregue la siguiente línea a un envoltorio padre (z-index: 0 no es necesario para la imagen en sí): position: relative; z-index: 10

2. O añadir transform: translateZ(0); a un contenedor padre (con los prefijos correspondientes para un mejor soporte del navegador)

Esto sucede debido a que las capas compuestas no están recortadas por sus capas padre. Así que a veces necesitas traer el padre con overflow:hidden a su propia capa de composición para que pueda aplicar overflow:hidden correctamente.

Por lo tanto, debe agregar la propiedad CSS transform: translateZ(0) al elemento padre de su elemento transformado.

/* add to parent so it is composited on its own layer before rendering */
.parent-of-transformed-element {
     -webkit-transform:translateZ(0);
     transform:translateZ(0);
}

Entonces overflow:hidden funcionará debido a que el elemento transformado se compone en su propia capa de renderizado como su hijo transformado.

Probado en los últimos Safari y Chrome en dispositivos iOS y no iOS

Aquí está la solución .

El HTML:

<div class="wrap">
    <div class="image"></div>
</div>

El CSS:

.wrap{
    width: 400px;
    height: 260px;
    overflow: hidden;
    border-radius: 15px;
    border:1px solid transparent;
}
div.image{
    background: url(http://blog.dothegreenthing.com/wp-content/uploads/2012/10/take-a-smile.jpg) no-repeat;
    width: 400px;
    height: 260px;


}
div.image:hover{
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    cursor: pointer;
    border:1px solid transparent;
}

Chrome necesita un border transparente que rodea la caja. Espero que esto ayude.

Extrañamente me encontré con este problema después de actualizar a Chrome 65, y para mí la adición de will-change: transform; a los estilos IFRAME hizo el truco.

Tuve un problema similar con la última versión de Chrome 65. Tengo un video iFrame escalado más grande usando transform: scale () en un div, y en la última versión de Chrome, ya no estaba enmascarado en los lados y salía del contenedor padre, incluso con overflow: hidden;

Mientras que translateZ tipo de ayudado, fue solo cuando usé translateX en el padre en su lugar lo hizo enmascarar el ancho correctamente:

 transform:translateX(0);

El error todavía existe en los navegadores webkit (Safari y Chrome en iOS) cuando se escala la máscara. Y entonces todas las soluciones anteriores no funcionan. Pero el uso de la propiedad css no estándar -webkit-mask-box-image también ayuda a las máscaras escaladas.

He estado tras esto durante mucho tiempo y lo único que ha funcionado para mí es esto rotate(0.1deg) translateZ(0) . Así que si está escalando el elemento

.something:hover img{

    -webkit-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    -moz-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    -o-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    transform: scale(1.1) rotate(0.1deg) translateZ(0);

}

Sin la rotación de la solución no funciona en mi extremo.

Si agrega transform a CUALQUIER padre img ( como rotar el contenedor donde está la imagen), debe agregar la misma solución al elemento, por ejemplo

.something_parent{
    transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -webkit-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -mos-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -o-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
}

Bueno... tratando de encontrar una solución encontró que

-webkit-appearance: button; 

Solucionado este comportamiento, pero tiene algunos efectos secundarios indeseables si el elemento no es realmente un botón, como bordes comportándose wierd, pero, reemplazando <a> con <button> en mi caso mantuvo el contenido escalado dentro de sus límites.