css3 transformed element not firing events onClick

Problem

//edit my brain was in a knot. Everything works as it should, this question is false and obsolete

If I rotateY an Element and try to click on the element, which has a bound eventListener (onClick), the event will not fire (hovering is also off). If I remove the transformation, the event fires as expected. I know, that by doing a transform, the element only appears at a different location, but "actually is still at its original position". But it seems idiotic to let one transform an element, but kill all its eventListeners..? Any direction I should dig into?

Problem courtesy of: japrescott

Solution

Not sure if you're using raw JavaScript or jQuery, but I have no problem:


div {
width: 50px;
height:50px;
Background: blue;
-WebKit-transform:rotate(45deg) translate(100px, 100px);
}

$('div').click(function(){
$(this).hide();
});

http://jsfiddle.net/JNM6x/


Maybe you can post your code? It could be something else that's giving you trouble.

Solution courtesy of: henryaaron

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.