Inaccuracy within a svg

[psaia]

I'm not sure if this is within the scope of this project but I'm finding that if you make an element within a SVG draggable, the numbers are a bit inaccurate. This causes for quirky behavior when using a bound.

For example, try to move this rect quickly from left to right. You'll find it difficult to get it to line up with the dotted line it starts out on. It only works when you move slowly and smoothly. Initially, I was thinking it had something to do with pointer-events, but after playing around with it I'm not so sure.

http://jsfiddle.net/dzrgnjgf/15/

Update:

This seems to be webkit related as it's only happening within safari and chrome. Not firefox.

[STRML]

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.

[psaia]

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.

[STRML]

This is in 0.7.4.

[psaia]

Thank you!