CSS3 Rotate on animated element causing click event not to invoke

Question

Okay this one is causing me a lot of problems.

When using the css3 -webkit-transform style with any kind of 3d rotation (such as rotateY(30deg)), it is extremely unreliable to bind a click event to this rotated object.

See the example code below or look at this fiddle (to see the unreliability in fiddle, click on the right side of the element). This example does not have animation but still is affected.

html:

<div id='box1'>Click this box.</div>

css:

#box1{
    -webkit-transform: rotateY(30deg);
}

jquery:

$('#box1').click(function(){
    alert('clicked box 1');
});

What I mean by 'unreliable' is that the click event is not always thrown (depending on where you click it), and sometimes the event is not thrown at all (no matter where you click it).

Is there a way to fix or avoid this so it works with CSS3 elements while rotated and animated?

Update:

Using the CSS property 'float:left' on the element seems to allow it to detect click events properly *while not in motion. Does anyone know why the float property fixes this?

My ultimate goal is to have the object receive click events while in motion, however, when I apply a new CSS3 rotate3d property (live, upon another jquery event) to give the object animation, the click event starts failing again.

Answer 1

I cannot seem to replicate the problem, it seems to be working correctly after adding a float:left;.

Sometimes browsers act funny while rendering the actual width of an HTML element. float:left seems to make the browsers calculate better.

This is the JavaScript :

$(document).ready(function (){
  $('#box1').bind({
    'click' : function () {
      alert('clicked box 1');
    },
    'hover' : function () {
      console.log('Over Box 1');
    }
  });
  $('#box2').click(function(){
    alert('clicked box 2');
  });

  window.angle = 0;
  setInterval(function () {
    if (window.angle >= 360) {
      window.angle = 0;
    } else {
      window.angle += 5;
    }
    $('#box1').css('-webkit-transform', 'rotateY(' + window.angle + 'deg)');
    }, 100);
});

Here is an updated fiddle with the animation, it seems to work fine : http://jsfiddle.net/RyvtZ/9/

(I added console.log on hover to make life simpler ;) )