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

前端之家收集整理的这篇文章主要介绍了当父级具有边界半径且子级具有动画时,CSS溢出隐藏在chrome中不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
现场演示: 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).子元素仍然可以在父元素中看到.

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

这是Chrome的错误吗?或者我错过了任何其他CSS属性

谢谢.

解决方法

您所要做的就是添加到父元素跟随css:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0,0);
-moz-transform: translate3d(0,0);

猜你在找的CSS相关文章