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

On Chrome build 78.0.3904.87, after trying will-change: transform, border: 1px solid transparent, transform: translateZ(0) on the parent element without success, I was able to get rid of the problem by reducing the border-radius from 50% to 49%. It seems border-radius: 50% is a special case.

So my working solution is:

.parent {
  z-index: 1;
  position: absolute;
  overflow: hidden;
  border-radius: 49%;
}

.child {
  z-index: 0;
  position: absolute;
}

Answer 2

The bug still exists in webkit Browsers (Safari and Chrome under iOS) when the mask is scaled. And then all the workarounds above do not work. But using the non standard css property -webkit-mask-box-image helps for scaled masks as well.

Answer 3

sorry for my poor English.

if the page isn't have positioned element, there is no need to set container element and child element z-index attribute both.

just adding z-index: 0(or other) attribute to container element.

.container {
    border-radius: .14rem;
    overflow: hidden;
    z-index: 0;
}
.child {

    }

Answer 4

It's a known bug in Webkit-based browsers - see #62363. You can add a border:1px solid transparent; to your .wrap class to workaround the problem.

For the updated requirement, adding a transition to an element with a border-radius, that's another known Chomre/Webkit bug #157218. Sorry but no known general workaround still, although one comment on that bug says that using the chrome://flags and using the --ignore-gpu-blacklist flag fixes it in Chrome 29 (which just hit the Chrome dev channel today).

Answer 5

Here is the Solution.

The HTML:

<div class="wrap">
    <div class="image"></div>
</div>

The CSS:

.wrap{
    width: 400px;
    height: 260px;
    overflow: hidden;
    border-radius: 15px;
    border:1px solid transparent;
}
div.image{
    background: url(http://blog.dothegreenthing.com/wp-content/uploads/2012/10/take-a-smile.jpg) no-repeat;
    width: 400px;
    height: 260px;


}
div.image:hover{
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    cursor: pointer;
    border:1px solid transparent;
}

Chrome needs a transparent border surrounding the box. Hope this helps.

Answer 6

The transparent border did not worked for me but to change the z-index of .wrap div and image worked (in my case, image is in fact a video)

Here is the css:

.videoContainer{
    overflow: hidden;
    z-index: 10;
}

video{
    margin-left: -55%;
    transform: scale(-1,1);
    -webkit-transform: scale(-1,1);
    -moz-transform: scale(-1,1);
    z-index: 0;
}

NOTE: see Jake Blues comment below concerning the necessity to have positioned element for enabling z-index to work properly.