Cannot interact with transitioning html elements

Question

This thing is driving me mad!

I create programmatically absolutely positioned divs inside another div in an html page. The outer div is registered for mousedown and touchstart events and the inner div starts moving using css3 transitions.

All the transitions affect the -WebKit-transform property.

Everything works ok, except for the event handling: In Chrome and Safari all the events are caught in the outer div event handler but the target property of the event is rarely the div I click!

When a div finishes it's transition then the event target is always the correct one, but NOT while the divs are transitioning. Is this a bug? Am I missing something?

UPDATE:

The following sample is compatible with Safari and Chrome

Here is an online sample that demonstrates the problem: http://jsfiddle.net/qfn7F/4/

Spheres get spawned from the top of the screen and are moving towards the bottom of it. When the user clicks on a sphere (mousedown event), the clicked sphere must disappear from the screen.

Here is the code that handles interactions with spheres:

container.addEventListener(onSelect, function() {
    if (event.target.classList.contains("transition")) {
        var tDiv = event.target;
        var box = tDiv.getBoundingClientRect();
        var durationEase = "0.25s linear";
        tDiv.style.pointerEvents = "none";
        tDiv.style.webkitTransform = "translate3d(" + box.left + "px," + box.top + "px, 1px)";
        tDiv.style.opacity = 0;
        tDiv.style.webkitTransition = "opacity " + durationEase;
    }
    event.preventDefault();
    event.stopPropagation();
}, false);

BUT the target of the event is RARELY the sphere that the user clicked, so the spheres do not disappear from the screen in an consistent way.

If a sphere reaches the bottom of the screen, that is the transition ends, then the click event works 100%.

Answer 1

I faced similar problem when animating using css3 Transform. Intsead of using css transform use the css positions to and give transtion to animate

jsfiddle.net

 tDiv.style.top = (tDiv.offsetWidth * 0.5 + Math.random() * (window.innerWidth - tDiv.offsetWidth)) + "px";
 tDiv.style.right = (window.innerHeight - tDiv.offsetHeight) + "px";