transformar: escala y desbordamiento: problema oculto en chrome

cuando se trabaja con css3 transform: escala, surge un problema peculiar. Si un padre Div ha desbordado: Oculto y Border-Radius aplicado, escalar el niño Div hace que se extienda más allá de su padre.

Descripción del problema

ocurre cuando se produce cuando Uso de transformación: escala para hacer zoom una imagen dentro de un div. Cuando se desbordan: Hidden y Border-Radius se establecen en el Div Parent, la imagen escalada desborda sus límites.

Problema de transición

inicialmente, se pensó que agregar un La transición de CSS resolvería el problema. Sin embargo, este enfoque demostró ineficaz.

solución

La solución a este problema radica en aplicar transformación: traducez (0) al elemento de envoltura. Esta propiedad de la propiedad CSS Fuerza de aceleración de hardware, que mejora el rendimiento de representación y elimina el problema de desbordamiento.

por qué funciona

usando transform: traducez (0) desencadena la aceleración de hardware en la aceleración de hardware en la GPU, lo que permite que el navegador utilice recursos gráficos dedicados para la representación. Esto mejora la eficiencia y la precisión de las transformaciones, evitando que la imagen desborde su contenedor.

para obtener más información sobre esta técnica y las implicaciones de rendimiento de Transform: TranslateZ (0), consulte el artículo de rendimiento CSS proporcionado