Home Dashboard Directory Help

CSS transforms (+ feature detection) not working on SVG elements by thebabydino


 as External Help for as External

Type: Bug
ID: 1046003
Opened: 12/3/2014 3:04:22 PM
Access Restriction: Public
User(s) can reproduce this bug


If I set a CSS transform (rotate(30deg) for example) on an SVG element, it doesn't get applied. However, if I then read the computed value of the transform property via JS, I get the matrix form (matrix(0.866025, 0.5, -0.5, 0.866025, 0, 0) in the rotate(30deg) case, because cos(30deg) = .866025 and sin(30deg) = .5) of the value I have set, even though the transform wasn't actually applied. See this test http://codepen.io/thebabydino/pen/gbaZVZ - both rectangles should be rotated, but the one one the left (using a CSS transform) isn't, only the one on the right is (using the SVG transform attribute).

Using transform attributes works as a fallback, but only for 2D. I should however be able to tell when the fallback is needed, which is when I run into the feature detection fails problem.
Sign in to post a comment.
Posted by Microsoft on 4/4/2016 at 2:49 PM
We've moved! This issue is now being tracked at https://developer.microsoft.com/microsoft-edge/platform/issues/1314724/
Posted by MaksimMukhachev on 3/22/2016 at 9:56 AM
2016... 2016 year!
Posted by Microsoft on 12/5/2014 at 11:00 AM
Thanks for the report Ana, getting this routed to the right team to look at.
Sign in to post a workaround.