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;