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

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

对于具有（overflow：hidden）的容器 添加（在您的情况下是li）

position:relative;
z-index:1;