Transform: Scale and Overflow: Hidden Issue in Chrome

When working with CSS3 transform: scale, a peculiar issue arises. If a parent div has overflow: hidden and border-radius applied, scaling the child div causes it to extend beyond its parent.

Problem Description

The issue occurs when using transform: scale to zoom an image within a div. When overflow: hidden and border-radius are set on the parent div, the scaled image overflows its boundaries.

Transition Issue

Initially, it was thought that adding a CSS transition would resolve the issue. However, this approach proved ineffective.

Solution

The solution to this problem lies in applying transform: translateZ(0) to the wrapper element. This CSS property forces hardware acceleration, which improves rendering performance and eliminates the overflow issue.

Why It Works

Using transform: translateZ(0) triggers hardware acceleration on the GPU, allowing the browser to utilize dedicated graphics resources for rendering. This improves the efficiency and accuracy of transformations, preventing the image from overflowing its container.

For more information on this technique and the performance implications of transform: translateZ(0), refer to the provided CSS performance article.