Bug with transform: scale and overflow: hidden in Chrome

Question

Working with CSS3 property transform: scale, I found interesting issue. I wanted to make a little zoom effect for pictures. But when I used for the parent div <

Answer 1

This happens due to composited layers not being clipped by their parent layers. So sometimes you need to bring the parent with overflow:hidden onto its own compositing layer so it can apply overflow:hidden correctly.

So you must add the CSS property transform: translateZ(0) to the parent element of your transformed element.

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

Then overflow:hidden will work due to having the transformed element be composited on its own rendering layer like its transformed child.

Tested on latest Safari and Chrome on iOS and non iOS devices