5

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%.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Summon
  • 968
  • 1
  • 8
  • 19
  • Related questions: http://stackoverflow.com/questions/18629298/on-a-moving-element-dont-fire-the-mouse-events http://stackoverflow.com/questions/9304215/css3-translate3d-mouse-events-issue http://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d http://stackoverflow.com/questions/18496551/translate3d-causing-jquery-hover-click-events-to-not-fire-correctly – Gennady Dogaev Nov 15 '13 at 01:07

1 Answers1

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";
Nisanth Sojan
  • 1,099
  • 8
  • 21
  • this is not as performant as the tranform animation, because in this case the elements are not cached... – Summon Nov 18 '13 at 11:42
  • i couldn't understand the caching part. could you explain some thing about it? – Nisanth Sojan Nov 18 '13 at 12:10
  • 1
    If you animate an element using the transform property instead of top, left etc then the performance is much higher due to GPU acceleration. This is even true if you apply a translate3d(0,0,0) to the element and then animate the top left properties. More details here: http://stackoverflow.com/questions/9661876/css-is-transition-left-top-gpu-accelerated – Summon Nov 18 '13 at 15:19