带有边框半径和溢出隐藏的转换在 Safari 中不起作用答案

【问题标题】：Transition on transform with border radius and overflow hidden doesn't work in Safari带有边框半径和溢出隐藏的转换在 Safari 中不起作用
【发布时间】：2014-11-11 12:52:34
【问题描述】：

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

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

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

【问题讨论】：

请看stackoverflow.com/questions/20620441/…
我不明白这如何解决我的问题..
部分修复是使用图像作为空 div 上的背景图像，而不是 <img> 元素。或者使用圆角矩形的-webkit-mask-image:。
今天我在带有 Cordova (WebView Chrome) 的 Android 设备上遇到了同样的问题。奇怪，前几天它运行良好。但是今天突然不行了。好的，也许是自动系统软件更新。就我而言，我在一个溢出隐藏的父级中设置了动画 svg 元素，其边界半径为一个圆。当我对 svg 子项的变换平移进行动画处理时，它们会与边框半径（不是矩形，只有半径）重叠。当我在 DevTools 中禁用动画时，溢出隐藏也适用于 svg 元素。奇怪....我不知道发生了什么。日志中没有更新。没有变化。
我的解决方法是使用边距或左/上来移动元素，而不是转换翻译。目前它并不完美。但我必须把它擦亮。这个bug真的很烦人。另请参阅：forum.webflow.com/t/…（但实际上。它也在 Chrome（移动）中）。

标签： css safari hover css-transitions

【解决方案1】：

您可以通过为具有溢出：隐藏的父元素添加 webkit-mask-image 来修复它

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

【讨论】：

几天后，该错误也出现在 Chrome / Chromium 上。在带有 Cordova (WebView) 的 Android 上。我使用旧版 Chrome 对其进行了测试。 (v65) 它有效。最新版本 (v78) 不起作用。在周末，表格自动更新了它。好惊喜。 -.- 感谢此解决方法解决了这一刻和这种情况下的问题。一开始我用左/上移动替换了变换平移。这也解决了问题。但在我的情况下，有一些小故障和更高的 CPU 使用率。由于它使用 GPU 加速，因此转换转换更加平滑。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：