儘管溢出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;