Css 边界半径和溢出隐藏的变换上的变换'；我不在野生动物园工作

这可能是一个常见的问题，但我找不到答案。了解问题的最佳方法是看一下这个小提琴：

基本上，我有一个div，它有

边界半径

和

溢出：隐藏

。div中有一个图像。当我将鼠标悬停在div上时，我希望使用过渡来缩放图像。但是，在动画期间，div的边界半径会中断（不再具有圆角）

---

将

-webkit transform:translateZ（0）

添加到div中可以在Chrome中修复此问题，但在Safari中不起作用。有人知道是否有修复方法吗？

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

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

---

添加

将更改：transform

到

overfow:hidden

项在mobile Safari上对我更有效。

请看这个，我不知道如何解决我的问题。部分修复方法是将图像用作空div上的背景图像，而不是

元素。或者使用圆形矩形的

-webkit掩码图像：

。今天，我在使用Cordova（WebView Chrome）的Android设备上遇到了同样的问题。奇怪的是，在它正常工作前几天。但今天突然不行了。好的，也许是自动系统软件更新。在我的例子中，svg元素在一个溢出隐藏的父对象中设置动画，边框半径为一个圆。当我为svg子体的transform translate设置动画时，它们与边界半径（不是矩形，只有半径）重叠。当我在DevTools中禁用动画时，溢出隐藏也适用于svg元素。奇怪的我不知道发生了什么事。日志中没有更新。无更改。我的解决方法是使用边距或左/上移动元素，而不是变换-平移。目前它并不完美。但我得把它擦亮。那只虫子真烦人。另请参阅：（但事实上，它也存在于Chrome（移动设备）中）。几天后，Chrome/Chormium上也出现了该漏洞。在Android上使用Cordova（网络视图）。我用旧版本的Chrome进行了测试。（v65）它可以工作。最新版本（v78）不起作用。周末，表格自动更新。真是惊喜感谢此解决方案修复了当前和本案例的问题。首先，我用左/上移动替换变换平移。这也解决了问题。但在我的情况下，一些小故障和更高的CPU使用率。变换平移更平滑，因为它使用GPU accel。