Why Does `overflow: hidden` Clip the Child Element When `transform: scale` is Applied to the Parent?

Handling Overflow and Zoom Effects with transform: scale

In working with CSS3 transforms, a puzzling issue emerges when combining transform: scale with overflow: hidden and border-radius on the parent container. As observed, the child element seems to extend beyond its parent's boundaries, causing an unsightly overflow.

Understanding the Issue

This peculiar behavior stems from the fact that scaling via transform: scale affects an element's rendered size but not its actual flow within the display tree. Consequently, when overflow: hidden is applied to the parent, it attempts to clip the child element based on its original unscaled size. This results in unexpected clipping.

Finding a Solution: transform: translateZ(0)

To address this issue, CSS performance techniques suggest adding transform: translateZ(0) to the wrapper element. This causes the browser to treat the element as having a three-dimensional rendering space, which resolves the overflow problem without altering the intended zoom effect.

Additional Resources

For more detailed information on the CSS performance implications of transform: translateZ(0), refer to the following resources:

• [CSS Performance: translateZ(0)](https://css-tricks.com/myth-busting-css-performance-translatez-0/)
• [Understanding the CSS translateZ Property](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateZ)

The above is the detailed content of Why Does `overflow: hidden` Clip the Child Element When `transform: scale` is Applied to the Parent?. For more information, please follow other related articles on the PHP Chinese website!