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;
}