-webkit-transform의 깜박임/렌더링 문제

Question

-webkit-transform과 (과) 이상한 문제가 있습니다. perspective 및 rotateX을 사용하여 요소를 "위로 올림"으로 만들면 요소의 높이가 너무 높으면 깜박이거나 특정 각도를 지나서 전혀 렌더링되지 않습니다.

문제를 설명하는 jsFiddle demo을 설정했습니다. 마우스를 좌우로 움직여 사각형을 회전시킵니다.

• 요소의 크기가 400px이면 모든 것이 정상적으로 작동하는 것 같습니다.

• "4000"을 클릭하면 요소의 높이가 4000px가됩니다. 텍스트가 특정 범위의 업데이트를 중지하고 렌더링이 깜박임입니다.

• "40000"을 클릭하면 40000px 높이가됩니다. 작은 각도에서 잘 렌더링되지만 은 전체적으로 약 80도에서 사라집니다..

여기서는 어떻게됩니까? 해결 방법이 있습니까? 아니면 WebKit 버그를 제출해야합니까?

(참고 : 나는 OS X의 사파리와 크롬 모두에서이 동작을 참조)

Answer 1

이 코드의 문제는 CSS3perspective 속성입니다. 높이가 4000px 이상일 때 요소가 화면에 가까울수록 사라집니다 (0x38x속성으로 정의 됨
요소가 더 높으면 요소가 더 멀리 떨어져 있어야합니다.)

나는 다른 관점이 요소의 높이에 따라 얻을 어떤 경우 명령문을했다 :. 내가 잘못 바이올린을 사용하고하지 않는

if (document.getElementById("m2").offsetHeight == 400) { 
    document.getElementById("m2").style.webkitTransform = "perspective(500) rotateX(" + (e.clientX/5) + "deg)"; 
} 

if (document.getElementById("m2").offsetHeight == 4000) { 
    document.getElementById("m2").style.webkitTransform = "perspective(5000) rotateX(" + (e.clientX/5) + "deg)"; 
} 

if (document.getElementById("m2").offsetHeight == 40000) { 
    document.getElementById("m2").style.webkitTransform = "perspective(50000) rotateX(" + (e.clientX/5) + "deg)"; 
}