當在Chrome中製作動畫時，隱藏的角落變得可見

Question

我有一個ul與border-radius: 10px; overflow:hidden並且裏面有多個li s。

正常情況下，ul邊角會隱藏內容。但是在Chrome中，當使用jQuery來動畫（淡入）li時，在動畫過程中，角落變得可見。

一旦動畫完成，li的邊角就會回到隱藏狀態。

我能做些什麼來防止這種情況發生？

這隻發生在Webkit瀏覽器中：Chrome和Safari。

HTML：

<ul> 
    <li>Text</li> 
    <li>Text</li> 
    <li>Text</li> 
</ul> 

CSS：

ul { 
    border-radius: 10px; 
    overflow: hidden; 
} 

Answer 1

你可以試試這個：

// give specific border-radius to first ans last li 
$('li:first').css('border-radius', '0 10px 0 0'); 
$('li:last').css('border-radius', '0 0 10px 0'); 

注意您可能還û se CSS

DEMO shows a sample animation