当父级具有边界半径且子级具有动画时,CSS溢出隐藏在chrome中不起作用

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.这次我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 中运行。