css - 带有边框半径和 overflow hidden 的变换转换在 Safari 中不起作用

Question

这可能是一个常见问题，但我找不到答案。理解这个问题的最好方法是看这个 fiddle :http://jsfiddle.net/sxvjejvk/

基本上我有一个带有border-radius 和overflow:hidden 的div。 div 里面是一张图片。当我将鼠标悬停在 div 上时，我希望使用过渡来缩放图像。但是，div 的边界半径会在动画持续期间中断(它不再有圆 Angular )。

将 -webkit-transform:translateZ(0) 添加到 div 可以在 Chrome 中修复此问题，但在 Safari 中不起作用。有谁知道是否有解决办法？

Answer 1

您可以通过为具有 overflow:hidden 的父元素添加 webkit-mask-image 来修复它

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