Javascript 在Chrome中设置动画时，隐藏角将可见

我有一个

ul

，边界半径为10px；溢出：隐藏，内部有多个

li

s

通常，

ul

角隐藏内部内容。但是在Chrome中，当使用jQuery为

li

s设置动画（淡入淡出）时，在动画过程中，

li

角变得可见

动画完成后，

li

s的角将恢复隐藏状态

我能做些什么来防止这种情况

这只发生在Webkit浏览器中：Chrome和Safari

HTML:

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

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

您可以尝试以下方法：

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

注意您也可以使用CSS

---

你能制作一个演示吗？我以前见过这个问题。可能是WebKit的错误。我在css动画中看到了溢出：边界半径之外隐藏的东西。我认为这是一个webkit错误，如@MattBall所说。是的，这是可行的，但它是一个解决办法，而不是解决问题的根源。@jsgroove欢迎使用web开发！：）