在 CSS 旋转动画期间隐藏的溢出不起作用答案

【问题标题】：Overflow hidden not working during CSS rotate animation在 CSS 旋转动画期间隐藏的溢出不起作用
【发布时间】：2014-02-02 07:37:07
【问题描述】：

我有一个边框半径为 50% 的父 div，溢出设置为隐藏。内部是一个子 div，它是动画的。只要子 div 的旋转属性未设置动画，一切正常 - 但只要我尝试为子 div 的旋转设置动画，父 div 的溢出：隐藏就不再起作用。

以下是一个示例 - 任何帮助都会很棒！

我正在 Safari 7.0.1 中进行测试

http://codepen.io/anon/pen/etEAv

【问题讨论】：

已在 Safari 5.1.7 (Windows 7) 上确认。 Overflow:hidden 有效，但忽略border-radius 属性。看起来像一个 Safari 错误。

标签： animation rotation css

【解决方案1】：

我知道这是一个老问题，但我遇到了同样的问题。我认为这个错误根本没有在 Safari 中修复。我能够通过在溢出中添加一个 z-index 来解决我的问题：隐藏元素。变换：translateZ（0）；也可以工作。似乎 position:fixed 也解决了这个问题，但这可能不适用于许多情况。希望这对其他人有所帮助。

【讨论】：

我有一个按钮，其中嵌套了一个伪元素，它在悬停时从 0 到 100% 的宽度进行动画处理，以在按钮内创建“填充”效果。伪元素仅在动画期间溢出其容器（具有圆角）之外，然后在动画结束时正确包含在父元素中。将 z-index 添加到父元素对我来说不起作用，但是将 transform: translateZ(0) 添加到父元素就像一个魅力，不需要其他更改。

【解决方案2】：

这是一个已知的 Safari 错误，已报告 here。它在 2012 年 11 月 14 日被标记为已解决。

Comment #25 From Manolis Kp. 2012-11-14 02:07:14 PST
This issue has been fixed, marking as resolved

因此，当您将 Safari 更新到最新的稳定版本时，您应该能够获得所需的行为。

【讨论】：

感谢您的信息。我希望它得到解决，但我在 Mac 上使用的是 Safari 7.0.1，这是最新版本 - 我仍然遇到问题。
考虑使用您的信息重新打开该错误。它将更快地得到解决，并具有帮助社区的额外好处。
会的。等待新帐户验证电子邮件，以便我可以提交信息。