尽管溢出CSS动画溢出它是父：隐藏

Question

我试图做一个“材质”动画，其中pseudoelement扩展悬停。

演示：

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与规模和溢出。

为有（溢出：隐藏）容器 插件（在你的情况下，它的LI）

position:relative; 
z-index:1;