CSS 动画溢出它的父级，尽管溢出:隐藏

Question

我正在尝试做一个"材料"动画，其中伪元素在悬停时展开。

演示：

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 中发生。}

Answer 1

我编辑了您的代码 在此处查看结果

它用规模和溢出来铬 BUG.

对于具有 （ 溢出：隐藏 ） 的容器添加（在您的情况下是 li ）

position:relative;
z-index:1;