td에서 div를 애니메이션 처리하면 Chrome에서 비정상적인 동작이 발생합니다.

Question

Chrome에서 다소 문제가있는 다소 복잡한 UI 위젯을 만들고 있습니다. 나는 문제를 분리 할 수 ​​있었고, 나는 td 내부 http://jsfiddle.net/8Kb3B/

에서 div 그것을 한 전시하고, 나는 jQuery의 .animate()와 사업부를 전환하기 위해 노력하고있어. Chrome에서 발생하는 현상은 div이 원래 너비로 돌아 오면 td이 다시 자라지 않는다는 것입니다. 또한 "숨기기"애니메이션의 끝 부분에 세심한주의를 기울이면 td의 너비가 div의 내용 폭에서 잠깐 깜박 거리는 것을 볼 수 있습니다.

.toggle(delay)을 사용할 때도 같은 일이 발생합니다. 지연없이 .toggle()을 사용하면 모든 것이 의도 한대로 작동합니다.

애니메이션은 Mozilla 제품 및 Internet Explorer에서도 제대로 작동합니다.

나는 여기에서 정말 간단한 것을 놓치고 있습니까?

Answer 1

나는 내 편에서 시도해 보면 도움이 될지도 모른다. webkit 기반 브라우저에 대해 다음과 같이 쓰기 : 대한

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    td { 
    padding-right:2px; 
    } 
    span{ 
    left:5px; 
    position:absolute; 
    } 
    #content { 
    border: 2px solid red; 
    width: 100px; 
    height:20px; 
    display:table; 
    overflow:hidden; 
    position:relative; 
    } 
} 

확인이 더 http://jsfiddle.net/8Kb3B/3/