CSS动画溢出它是父级，尽管溢出：隐藏

Posted 2023-03-06

【中文标题】CSS动画溢出它是父级，尽管溢出：隐藏

【英文标题】：CSS Animation Overflows It's Parent, Despite Overflow: Hidden

【发布时间】：2015-02-21 00:56:42

【问题描述】：

我正在尝试制作“材质”动画，其中一个伪元素在悬停时展开。

演示：

http://codepen.io/Tiger0915/pen/WbxyJB

在hover 上，span:after 放大以填充其父级。

但是在过渡期间仔细观察li的角落，你可以看到它溢出了border-radius。

我有：

li 
  overflow: hidden;
  border-radius: 8px;

  &:hover span:before 
        @include transform(scale(5));
  

但由于某种原因，当它制作动画时，overflow: hidden 不适用于 li 的角，这些角用 border-radius 进行四舍五入。

为什么overflow: hidden 不能与我的border-radius 一起使用，只有在转换发生时？

^{注意：这只发生在 Chrome 中。}

【问题讨论】：

这是 Chrome 中的一个错误。

真的吗？哇，好的，你有错误报告我可以参考更多信息吗？？

很高兴知道这不是我做错了什么，哈哈。

code.google.com/p/chromium/issues/detail?id=82417 | code.google.com/p/chromium/issues/detail?id=71639

bugs.webkit.org/show_bug.cgi?id=72619

【参考方案1】：

我编辑了你的代码查看结果here

it chrome BUG 带有缩放和溢出。

对于具有 (overflow:hidden) 的容器 添加（在你的情况下是 li）

position:relative;
z-index:1;

【讨论】：

你是我最喜欢的人。