CSS3 Girar en el elemento animado causando que el evento click no invoque

De acuerdo, este me está causando muchos problemas.

Cuando se usa el estilo css3 -webkit-transform con cualquier tipo de rotación en 3D (como rotateY(30deg) ), es extremadamente poco fiable vincular un evento de clic a este objeto girado.

Vea el siguiente código de ejemplo o mire este violín (para ver la falta de fiabilidad en el violín, haga clic en el lado derecho del elemento). Este ejemplo no tiene animación, pero aún se ve afectado.

html:

 
Click this box.

css:

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

jquery:

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

Lo que quiero decir con “poco confiable” es que el evento de clic no siempre se lanza (dependiendo de dónde haga clic) y, a veces, el evento no se lanza en absoluto (sin importar dónde haga clic).

¿Hay alguna manera de corregir o evitar esto para que funcione con elementos CSS3 mientras se gira y se anima?

Actualizar:

El uso de la propiedad CSS ‘float: left’ en el elemento parece permitirle detectar eventos de clics correctamente * mientras no esté en movimiento . ¿Alguien sabe por qué la propiedad flotante corrige esto?

Mi objective final es hacer que el objeto reciba eventos de clic mientras está en movimiento, sin embargo, cuando aplico una nueva propiedad CSS3 rotate3d (en vivo, en otro evento jquery) para dar la animación del objeto, el evento click vuelve a fallar.

    Parece que no puedo replicar el problema, parece estar funcionando correctamente después de agregar un float:left; .

    A veces, los navegadores actúan de forma divertida al tiempo que muestran el ancho real de un elemento HTML. float:left parece hacer que los navegadores calculen mejor.

    Este es el 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); }); 

    Aquí hay un violín actualizado con la animación, parece funcionar bien: http://jsfiddle.net/RyvtZ/9/

    ( console.log en hover para hacer la vida más simple;))