隐藏边框半径和溢出的变换时过渡在 Safari 中不起作用

Question

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

基本上，我有一个带有border-radius和overflow:hidden的div。div内部是一个图像。当我将鼠标悬停在div上时，我希望使用转换来缩放图像。但是，div的边界半径在动画期间会中断（不再有圆角）。

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

Answer 1

您可以通过为有溢出的父元素添加webkit掩码图像来修复它：隐藏

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

Answer 2

在移动Safari上，将will-change: transform;添加到overfow: hidden项目对我来说效果更好。

Answer 3

悬停时将border-radius添加到父元素对我有效。