Inaccuracy within a svg about react-draggable HOT 4 CLOSED

I think I found the issue; I can reproduce this in most browsers if I simply drag this thing fast enough out of the window.

This is the function for creating a transform:

    function createCSSTransform(style) {
      if (!style.x && !style.y) return {};
      // Replace unitless items with px
      var x = style.x + 'px';
      var y = style.y + 'px';
      return {
        transform: 'translate(' + x + ',' + y + ')',
        WebkitTransform: 'translate(' + x + ',' + y + ')',
        OTransform: 'translate(' + x + ',' + y + ')',
        msTransform: 'translate(' + x + ',' + y + ')',
        MozTransform: 'translate(' + x + ',' + y + ')'
      };
    }

It seems that in some browsers, removing a translation completely causes the element to stay where it was last rendered, instead of being equal to translate(0,0).

One way to fix it is to remove the check on the first line. But I am not sure if this will affect other code. I will spend some more time with it.

from react-draggable.

You're right, that definitely fixes is the issue. Interesting. I was thinking it was mouse event related and that a solution similar to this would need to be implemented specific for SVG elements. Nice find.

from react-draggable.

This is in 0.7.4.

from react-draggable.

Thank you!

from react-draggable.