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

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

Demo:

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

On hover, a span:after放大以填充其父级。

但仔细观察角落li在转换期间，您可以看到它溢出了border-radius.

I have:

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

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

但由于某种原因，当它动画化时，overflow: hidden不适用于角落li，四舍五入为border-radius.

为什么不overflow: hidden和我一起工作border-radius，仅当转换发生时？

^{Note: This happens only in Chrome.}

我编辑了你的代码查看结果here http://codepen.io/anon/pen/BjqGKz

它带有刻度和溢出的镀铬BUG。

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

position:relative;
z-index:1;