当父元素具有边框半径并且子元素具有动画效果时，Chrome中CSS的溢出隐藏不起作用。

Question

实时演示：http://codepen.io/flanker/pen/ajAow

有三个元素，如下：

<div class="parent">
  <div class="child"></div>
</div>

在第一个例子中，父元素有一个border-radius并且子元素会溢出。在第二个例子中，父元素有一个border-radius和overflow：hidden，因此子元素被裁剪。两者都能正常工作。

但是在第三个例子中，父元素具有border-radius和overflow：hidden。这次我向子元素添加了一个动画，然后在Chrome（版本28.0.1500.52 beta / Mac OS X 10.8.3）中overflow：hidden无法正常工作。子元素仍然可以在父元素之外可见。

但是在Firefox（20.0）中它可以正常工作。

这是Chrome的错误吗？还是我忽略了其他CSS属性？

谢谢。

- flanker

Answer 1

您只需将以下css添加到父元素中：

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);

- Bartłomiej Semańczyk

---

平凡、直观的解决方案 - Mikko Ohtamaa

请注意，Chrome的最新版本只接受backface-visibility: hidden;，因此不需要前缀。 - Rijk

Answer 2

只需在您的最后一个类中添加overflow: hidden;即可？

.flash .bar {
  -webkit-animation: flash 5s linear infinite;
  overflow: hidden;
}

实时演示已经更新，似乎在Chrome中可以正常工作。

- Tanner

---

哇，你好快且它有效。但是我原以为overflow指定了如果内容溢出会发生什么。不理解为什么在子元素中使用overflow: hidden可以解决这个问题。而且在Firefox浏览器中也没有任何问题。 - flanker

没问题，我只是使用了你已经有的东西。我的电脑上的Firefox不能动画第三个元素，但Chrome可以？！ - Tanner

看起来当我给这个条形图添加旋转变换时，'overflow: hidden' 不起作用。在这里检查：http://codepen.io/flanker/pen/yjsxn（在Chrome中无法正常工作，在Firefox中可以）。 - flanker

Answer 3

看起来这个问题在Chrome 29中已经被修复了（在Chrome版本29.0.1547.22 beta中测试过）。

- flanker

---

这个问题似乎在Chrome 40中再次出现了。 - Dex

无法在Chrome 55中重现此问题。 - Udo G