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

Both ways of solving this issuer worked fine:

1. Add the following line to a parent wrapper (z-index: 0 is not necessary for the image itself): position: relative; z-index: 10

2. Or add transform: translateZ(0); to a parent wrapper (with the corresponding prefixes for better browser support)

Answer 2

transform: translateZ(0); on the wrap element did the trick for me.

See CSS performance relative to translateZ(0) for more information about this technique.

Answer 3

I have been after this for long time and only thing that has worked for me is this rotate(0.1deg) translateZ(0) . So if you are scaling the element

.something:hover img{

    -webkit-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    -moz-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    -o-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    transform: scale(1.1) rotate(0.1deg) translateZ(0);

}

without the rotate the fix does not work on my end.

If you add transform to ANY img parent ( like rotate the container where the image is ) , you need to add same fix to the element for example

.something_parent{
    transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -webkit-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -mos-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -o-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
}

Answer 4

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

Answer 5

Well... trying to find a workaround found that

-webkit-appearance: button; 

fixed this behavior, but has some undesirable side effects if the element isn´t actually a button, like borders behaving wierd, but, replacing <a> with <button> in my case kept the scaled content within its bounds.

Answer 6

I had a similar issue with the latest version of Chrome 65. I have an iFrame video scaled larger using transform: scale() in a div, and on the latest Chrome version, it was no longer masked on the sides and was popping out of the parent container, even with overflow: hidden;

While translateZ sort of helped, it was only when I used translateX on the parent instead did it mask the width properly:

 transform:translateX(0);