2012-04-30 4 views
3

마우스를 올리면 상자가 생성됩니다. 박스 안에는 position:absolute이며 상위 상자보다 큰 축소판이 있습니다.상위 컨테이너의 애니메이션 중에 절대적으로 위치한 자식 요소가 잘립니다.

부모 컨테이너의 너비 또는 높이를 움직이면 썸네일은 부모 크기로 자르지 만 애니메이션 동안에 만 적용됩니다. http://jsfiddle.net/Q2BPx/3/

내가 잘못 뭐하는 거지 :

는 (Mac에서 크롬/사파리/FF에서 테스트) 간단한 데모 여기를 참조하십시오?

+1

이것은 jquery가'overflow-x : hidden; 오버 플로우 -y : 숨겨진 애니메이션 '. – Yoshi

답변

5

나는 당신이 "틀린"무엇인가를하고 있다는 것을 모릅니다.

애니메이션 메서드가 실행될 때 jQuery는 인라인 스타일을 사용하여 애니메이션의 각 프레임에 대한 너비를 설정합니다. 또한 "overflow : hidden"스타일을 인라인 스타일에 추가합니다.

다음을 추가하면 확장기의 CSS를 해킹 할 수 있습니다. overflow : visible! important;

이렇게하면 인라인 오버플로가 방지됩니다. 미리보기 이미지가 잘리지 않게됩니다.

그러나 jQuery 코드를 살펴보면 애니메이션이 오버플로 설정을 사용하는 이유를 확인할 수 있습니다.

또는 페이지를 테스트하여 오버플로 : visible! important를 사용하여 이상을 도입하지 않았는지 확인하십시오.

+0

감사. 와우, 그건 jQuery의 버그 같아. 나는 그들이 그것을하기위한 이유가 있다고 확신하지만 그것은 코드에 문서화되어 있지 않다. https://github.com/jquery/jquery/blob/master/src/effects.js#L214 –

관련 문제