这可能是一个常见问题，但我找不到答案。理解这个问题的最好方法是看看这个小提琴：http://jsfiddle.net/sxvjejvk/
基本上我有一个border-radius和overflow:hidden的div。 div里面是一个图像。当我将鼠标悬停在div上时，我希望使用过渡来缩放图像。但是，在动画的持续时间内， div的border-radius打破 （它不再有圆角）。
将-webkit-transform:translateZ(0)添加到div中会在Chrome中修复此问题，但它在Safari中无效。有谁知道这是否有解决方法？
答案 0 :(得分：5)
您可以通过为具有overflow：hidden
的父元素添加webkit-mask-image来修复它-webkit-mask-image: -webkit-radial-gradient(white, black);
答案 1 :(得分：1)
在移动Safari上，将will-change: transform;添加到overfow: hidden项目对我来说更合适。
答案 2 :(得分：-1)
你看到Safari的版本了吗？也许转换标签因此而无效。
上提供的版本