google-chrome - 当父级具有边框半径并且子级具有动画时，CSS溢出隐藏在chrome中不起作用

Question

现场演示： http ://codepen.io/flanker/pen/ajAow

有以下三个要素：

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

在第一个父border-radius元素中，子元素将被溢出。在第二个父母有一个border-radius，overflow: hidden所以孩子被剪裁了。他们都工作正常。

但是在第三个中，父元素有border-radiusand overflow: hidden。这次我animation在子元素中添加了一个，然后overflow: hidden在 Chrome 中不起作用（版本 28.0.1500.52 beta / Mac OS X 10.8.3）。子元素在父元素之外仍然可见。

但它在 Firefox (20.0) 中运行良好

这是 Chrome 错误吗？还是我缺少任何其他 CSS 属性？

谢谢。

Answer 1

您所要做的就是添加到父元素跟随css：

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

Answer 2

只是添加overflow: hidden;到你的最后一堂课？

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

现场演示对此进行了更新，并且似乎在 chrome 中工作。

Answer 3

看起来这已在 Chrome 29 中修复（在 Chrome 版本 29.0.1547.22 beta 中测试）。