Transition on transform with border radius and overflow hidden doesn't work in Safari

问题

This might be a common issue, but I couldn't find the answer. Best way to understand the problem is to look at this fiddle: http://jsfiddle.net/sxvjejvk/

Basically I have a div with a border-radius and overflow:hidden. Inside the div is an image. When I hover over the div, I want the image to scale, using a transition. However, the border-radius of the div breaks (it doesn't have rounded corners anymore) for the duration of the animation.

Adding -webkit-transform:translateZ(0) to the div fixes this in Chrome, but it doesn't work in Safari. Does anyone know if there's a fix for this?

回答1:

You can fix it by adding webkit-mask-image for the parent element which has overflow:hidden

-webkit-mask-image: -webkit-radial-gradient(white, black);

回答2:

Did you see the version of your Safari? Maybe the transform tag doesn't work because of this.

See the versions available at W3C site http://www.w3schools.com/css/css3_2dtransforms.asp

来源：https://stackoverflow.com/questions/25891362/transition-on-transform-with-border-radius-and-overflow-hidden-doesnt-work-in-s