Home > Article > Web Front-end > Why Does `transform: scale` Overflow in Chrome with `overflow: hidden` and `border-radius`?
Overflow Issue with Transform: Scale in Chrome
Problem:
While attempting to create a zoom effect using CSS transform: scale, it was discovered that the child div extended beyond the boundaries of the parent div when overflow: hidden and border-radius were applied to the parent. This issue persisted even when transitions were added.
Solution:
Adding transform: translateZ(0); to the wrapper element resolved the issue. As detailed in the provided demo, this technique manipulates the third dimension (Z-axis) to enhance performance and counteract the overflow problem.
The above is the detailed content of Why Does `transform: scale` Overflow in Chrome with `overflow: hidden` and `border-radius`?. For more information, please follow other related articles on the PHP Chinese website!