velocity icon indicating copy to clipboard operation
velocity copied to clipboard

Translate on SVG group fails in Edge

Open sproktec opened this issue 9 years ago • 7 comments

A little niche I know but here here is the fiddle

https://jsfiddle.net/sproktec/k8q7v7a7/1/

It works fine across the board other than Edge where velocity is using translateX & translateY as a style rather than a translate value in the transform attribute.

sproktec avatar Dec 16 '15 11:12 sproktec

I can confirm that SVG transforms via velocity don't work with IE Edge because they are done via CSS transforms (which are not supported for SVGs in IE), and not with the transform attribute.

In older versions (tested with IE10) it works. This is because the IE-detection of velocity currently does not detect Edge. As a result, velocity assumes that CSS transforms are supported.

I fixed it by changing the IE helper function:

    var IE = (function() {
        if (document.documentMode) {
            // ...
        } else {
            for (var i = 7; i > 4; i--) {
              // ...
            }

            // <added this>
            var isMsEdgeRegexp = /Edge\/([0-9]+)/i;
            var msEdgeMatch = isMsEdgeRegexp.exec(navigator.userAgent);
            if(msEdgeMatch) {
                return parseInt(msEdgeMatch[1]);
            }
            // </added this>
        }

        return undefined;
    })();

@julianshapiro Any chances to get this merged? This issue breaks many of the SVG-related animations for all IE Edge users.

groe avatar Jan 28 '16 10:01 groe

Until this has been merged, it can be worked around by setting the documentMode property manually (which seems to have no effect in IE edge anyway). Include this before including velocity.js:

  <script type="text/javascript">
    // MS Edge/velocity.js monkeypatch
    // https://github.com/julianshapiro/velocity/issues/620
    (function() {
      var msEdgeMatch = /Edge\/([0-9]+)/i.exec(navigator.userAgent);
      if(msEdgeMatch) document.documentMode = parseInt(msEdgeMatch[1]);
    })();
  </script>

  <script src="velocity.min.js"></script>

groe avatar Jan 28 '16 10:01 groe

@groe this will get merged in the next release

kenwheeler avatar Jan 28 '16 15:01 kenwheeler

Has this been fixed in any releases yet ?

Oquile avatar Jan 15 '17 18:01 Oquile

Are there any plans to fix this issue?

danielbarati avatar Feb 13 '17 11:02 danielbarati

A year later, any plans to get this released? :) I can open a PR if it's not already implemented somewhere.

andreyrd avatar Dec 15 '17 18:12 andreyrd

Nothing happened for most of the year, then been concentrating on v2 (the develop branch) - it'll be a lot easier to add this now, but want to think if there's a better way to handle the different types of elements first. Feel free to look over the develop branch if you feel like adding to it :-)

Rycochet avatar Dec 19 '17 12:12 Rycochet