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

Question

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

演示:

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

在悬停时，span:after 会放大以填充它的父元素。

但是仔细观察过渡过程中li的 Angular ，可以看到它溢出了border-radius。

我有:

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

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

但由于某些原因，当它设置动画时，overflow: hidden 在 li 的 Angular 上不起作用，它用 border-radius 圆 Angular 。

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

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

Answer 1

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

它是 chrome 有水垢和溢出的 BUG。

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

position:relative;
z-index:1;