Chrome에서 애니메이션을 적용 할 때 숨겨진 모서리가 표시됩니다.

Question

ul에 border-radius: 10px; overflow:hidden이 있고 내부에 복수 li이 있습니다.

일반적으로 ul 모서리는 내부 내용을 숨 깁니다. 하지만 크롬에서 jQuery를 사용하여 li을 애니메이션 (페이드)하면 애니메이션 중에 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