CSS3 변환 후 클릭이 발생하지 않습니다.

Chrome/Safari 브라우저에서 문제가 있습니다. CSS3 변환을 적용한 후에는 마우스 업 및 을 클릭하지 마십시오. 이벤트 (IE9/10에서는 잘 작동 함)를 수신했습니다.CSS3 변환 후 클릭이 발생하지 않습니다.

<script type="text/javascript"> 
    $(".box").mousedown(function (e) { 
     $(this).addClass('transform'); 
    }); 

    $(".box").mouseup(function (e) { 
     $(this).removeClass('transform'); 
    }); 

    $(".box").click(function (e) { 
     alert("Click"); // Not worked under Chrome/Safari ! 
    }); 
</script> 

<div class="box"></div>

와 CSS3 스타일 :

이 내 작동하지 샘플입니다

.box { 
    background-color:#f00; 
    width:200px; 
    height:200px; 
} 

.transform { 
    transform-origin: 0% 50%; 
    transform: rotateY(10deg); 
    -ms-transform-origin: 0% 50%; 
    -ms-transform: rotateY(10deg); 
    -webkit-transform-origin: 0% 50%; 
    -webkit-transform: rotateY(10deg); 
}

출처

2012-07-26 Victor

문제는 당신이 설정하는 데 필요한 것입니다 position:absolute :

.transform { 
    transform-origin: 0% 50%; 
    transform: rotateY(30deg); 
    -ms-transform-origin: 0% 50%; 
    -ms-transform: rotateY(30deg); 
    -webkit-transform-origin: 0% 50% 0px; 
    -webkit-transform: rotateY(-31deg); 
}

Check this Demo UPDATED 2

당신은 변환

출처

2012-07-26 18:45:32 Luis

고맙습니다. 그러나 회전 (2D)과 회전 X/Y (3D)의 차이점을 확인합니다. 내 아이디어는 3D 변환을 사용하는 것이 었습니다. – Victor

@Victor Ok, 내 업데이트를 확인해보십시오! – Luis

그래, 불필요한 콜론을 제거하고 내 질문에서 설명한 것과 같은 결과를 받았습니다. – Victor

이 웹킷과 브라우저 버그에 대해이 링크를 확인할 수 있습니다. z- 변환을 취소 할 때 매우주의 깊게 클릭하면됩니다 (올바르게 - 더 간단합니다).

Firefox와 IE 모두 z- 변환에도 불구하고 클릭을 처리합니다.

position : absolute는 일부 브라우저에서는 작동하지만 브라우저 오류는 부적절한 해결책입니다.

출처

2013-03-30 01:00:13 smaudet

이 문제가 발생할 수있는 몇 가지 이유가 있습니다. 언급 한 바와 같이 그 중 하나는 위치가 절대 위치 어딘가에 설정되어야한다는 것입니다.

그러나 변환 된 얼굴에 대해 transformZ 값이 무작위로 계산되는 webkit (및 다른 브라우저의 경우도 있음)에 버그가 있습니다. 따라서 솔루션을 적용해야합니다 :

-webkit-transform:translateZ(0px); 
-moz-transform:translateZ(0px); 
transform:translateZ(0px);

당신에게 상호 작용 문제를 일으키는 요소에. 이것은 여러개의 중첩 된 자식 요소로 변형 된 div 요소에서 나를 위해 일했으며 간헐적으로 나에게 다른 각도로 클릭 피드백을 제공했습니다. 부모 요소가 자식 요소를 눈에 띄지 않게 보이지 않게한다는 의미에서 자식 요소 중 하나를 부모 요소의 가장자리 위로 이동하여 문제를 '해결할 수 있었기 때문에 이것이 발생합니다.

그러나이 수정 사항은 처음부터 존재해서는 안되는 후속 하위 요소의 Z 깊이와 관련된 다른 문제를 해결하는 것으로 나타났습니다. 이것은 간단한 루핑 렌더 버그를 의미합니다. 즉, devs가 렌더 루틴을 조정할 때 브라우저의 향후 업데이트에서이 '수정'이 중단 될 수 있음을 의미합니다.

출처

2013-10-09 01:58:56 smaudet

CSS3 변환 후 클릭이 발생하지 않습니다.

답변

관련 문제