Chromeでアニメーションすると非表示の角が表示される

Question

私はulにborder-radius: 10px; overflow:hiddenを持ち、内部には複数のliがあります。

通常、ulコーナーは内部コンテンツを隠します。しかし、Chromeでは、jQueryを使用してliをアニメーション化（フェード）すると、アニメーション中にliの角が表示されます。

アニメーションが完了すると、liのコーナーが非表示に戻ります。

これを防ぐにはどうすればよいですか？

これは、ChromeとSafariのWebkitブラウザでのみ発生します。

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'); 

NOTEをあなたはuがまたしてもよいですSE CSS

DEMO shows a sample animation