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

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

it chrome BUG 带有缩放和溢出。

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

position:relative;
z-index:1;