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

Posted 2023-03-06

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

【英文标题】：CSS overflow hidden not working in chrome when parent has border radius and child has animation

【发布时间】：2013-06-22 07:59:37

【问题描述】：

现场演示： 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 属性？

谢谢。

【参考方案1】：

只需将overflow: hidden; 添加到您的最后一堂课吗？

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

现场演示已对此进行了更新，并且似乎可以在 chrome 中运行。

【讨论】：

哇，这么快，它的工作原理。但我认为overflow 指定了如果内容溢出会发生什么。无法理解为什么子元素中的 overflow: hidden 会解决此问题。火狐也没有问题。

没问题，我只是用了你已有的。我机器上的 Firefox 不会为第三个元素设置动画，但 chrome 可以？！

当我向栏添加旋转变换时，看起来“溢出：隐藏”不起作用。在这里查看：codepen.io/flanker/pen/yjsxn（在 Chrome 中损坏，在 Firefox 中有效）

【参考方案2】：

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

【讨论】：

Chrome 40 似乎又出现了这个问题

无法使用 Chrome 55 重现此内容

【参考方案3】：

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

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

【讨论】：

简单直观的解决方案

请注意，最新版 Chrome 只接受backface-visibility: hidden;，所以不加前缀。