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。

Answer 3

Chrome 29中已修复此问题（Chrome版本29.0.1547.22测试版）。

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

3 个答案: