velocity
velocity copied to clipboard
Translate on SVG group fails in Edge
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.
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.
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 this will get merged in the next release
Has this been fixed in any releases yet ?
Are there any plans to fix this issue?
A year later, any plans to get this released? :) I can open a PR if it's not already implemented somewhere.
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 :-)