Comments: How to detect if CSS transforms are supported on SVG

[eprev]

This issue is reserved for comments on How to detect if CSS transforms are supported on SVG.

[eli-crow]

Thanks for the article! Saved my butt! The Object.assign call should be replaced by individual property assignments for testing on older browsers (IE11-).

[ChrisMBarr]

For me this currently seems broken.

• Chrome 72 returns false (this is ❌ incorrect)
• Firefox 65 returns true (this is ✔️ correct)
• Edge 18 returns true (this is ❌ incorrect)
• IE throws an error because it doesn't support Object.assign ⚠️

---

This fixes it for IE so it can at least run without errors, but it's still incorrect for Chrome & Edge

var supportsCSSTransformsOnSVG = (function() {
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('viewBox', '0 0 2 2');
    svg.style.position = 'absolute',
    svg.style.top = 0,
    svg.style.left = 0,
    svg.style.width = '2px',
    svg.style.height = '2px',
    svg.innerHTML = '<rect width="1" height="1" style="transform: translate(1px, 1px)"/>';
    document.body.appendChild(svg);
    var result = document.elementFromPoint(1, 1) !== svg;
    svg.parentNode.removeChild(svg);
    return result;
})();

[eprev]

Hey Chris, thanks for your comment.

Just checked https://jsfiddle.net/w9hrzotf/ in Chrome 72 and it prints true, which is correct.

As for Edge 18, according to platform status support for CSS transforms was added in Edge 17, this makes true correct.

[ChrisMBarr]

I am running Chrome 72 and it prints false for me.

[ChrisMBarr]

Just had a thought... I am running a hiDPI display on my laptop, and perhaps the 1px size doesn't work well here since that's actually about 1/4 of a "real pixel" and needs a larger margin of error.

I've updated the code to this, and I now get true printed out in Chrome, Firefox, and Edge, and false in IE 11 https://jsfiddle.net/zwsnL35c/5/

[eprev]

Good catch, I managed to get false when the page was 125% of the original size. Crazy.

[ChrisMBarr]

Cool! Do my changes still work correctly for a standard display? I don't have access to one right now.

The web is a lot harder now that 1px !== 1px

[ChrisMBarr]

So I guess I'm just having issues with animating SVG transform animations in Edge, which is why I was saying it was reporting things incorrectly. My animations currently work in Chrome & Firefox, but not in Edge. I am animating a clip-path and transform: translate(x, y) on SVG <path> elements and nothing is happening. opacity animations work in edge, but that's about all.

[eprev]

Sorry, not familiar with it. As a rule of thumb, if you have a code sample that works in Chrome and FF as expected, and doesn’t in Edge, I’d suggest to check if the issue is known or report it https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/?page=1