SVG Animations not working in Edge

External Issue #8487752

Details

Author
Ratish P.
Created
Aug 14, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
14.14901
Reports
Reported by 18 people

Sign in to watch or report this issue.

Steps to reproduce

Go to www.codeschool.com

Scroll to the ‘How Code School Works’ section.

The SVG animations for each of the SVG images displayed in this section do not work.

The same works in Firefox and Chrome.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Ibrahim O.”

    • Edge does not presently support the animation of SVG elements with CSS animations. A reduction of this issue can be seen here: https://jsfiddle.net/jonathansampson/c8zmgyym/. As of August 15, 2016 Microsoft Edge only animates the HTML element.

    • Microsoft Edge Team

      Changed Status to “By design”

    • "By design"? Really???
      It doesn’t suprise me that Edge has only about 5.5% of market share with that approach.

    • Why by design! that’s unreasonable!

    • An now?
      How should web developers work around this Bug?

      I am not only confused, i am mad as hell.
      This is just embarrassing

    • I see you’re continuing the path of incompetence set by years of experience developing IE. Sure, let’s have more fallbacks, more “Edge” cases.

    • Well this is just mind-numbingly stupid. Talk about shooting yourself in the chin.

    • Looks like my web development firm will not be supporting Edge “by design”

    • I have little interest in bashing the dev team for this decision, but I’d ask for a little bit of elaboration/discussion on this decision. Please help us understand how this affects you too!

      To give a little context for discussion:

    • This will affect my development team by forcing them to do extra work for a spec that is included in every major browser we support.

      With more and more devices coming out with high pixel density screens, SVGs are the best option for crisp, clear graphics/ui elements. Combine that with the fact that CSS animations are highly optimized, means you are forcing developers to provide Edge users with subpar UX, which over time will make more users jump ship to browsers that support these features.

      Edge does not have the luxury of a bunch of legacy ActiveX users being forced to use the browser like IE had. Give people the option and they will choose a better UX over anything else.

    • While this is in the development backlog, its priority is medium. You guys should really consider catching up with all other major browsers.

    • Yet one more reason why my agency doesn’t support Edge.

      ‘By design’ we don’t even run polyfills for cases like this, or even have QA run tests in Edge. We have no interest in picking up the tab for Microsoft’s technical debt.

    • You piece of shit company, bankrupt already so something better can take your place.
      -me, web developer & PC gamer

    • That’s kind of a lot of vitriol, yod.

      I know you guys are trying to clear the slate and build a cutting edge browser, but spec parity with the competing options is essential. “We know better” design decisions are really developer-hostile. That barb about “Edge” cases is on point. Priority bump?

      https://www.reddit.com/r/webdev/comments/6vpyun/oh_microsoft/?utm_content=comments&utm_medium=hot&utm_source=reddit&utm_name=frontpage

    • Bumping this as well

    • That’s not exactly the mentality you should be having when your browser is fighting to gain relevance and market share. As of right now Edge just looks like an IE re-skin and this way of handling standards-compliance will keep it on that path.

    • "By Design"? No wonder Microsoft have to pressure users with constant ads not just on the web but also the operating system about Edge.

      And there was me thinking Microsoft finally got its act together on web browsers.

    • If that’s the way you’re going, we’re going to cut our losses now and drop Edge support.

      If you’re unwilling to support standards used globally - after the years we all wasted papering over IE’s flaws - then I see no reason to sink time and resources into making you look competent.

    • Microsoft Edge Team

      Changed Status from “By design” to “External”

    • Hello, it seem to me that the earlier resolution (By Design) is not correct here. I took a look at the reported site and the root cause of the animations not working is the fact that Edge doesn’t (yet) support CSS transform property on SVG nodes. This is a known gap that we plan to address in one of the coming updates (can’t provide a timeline yet, sorry).

      It’s tracked on our status page as https://developer.microsoft.com/en-us/microsoft-edge/platform/status/supportcsstransformsonsvg/ and implementing this would allow us to make this site work (including transform and animation of the elements).

      Again, sorry for earlier miscommunication - I’m re-resolving this item as a duplicate to a work item that tracks this work and would encourage you to check status item provided above for the updates. Hope this helps!

    • This issue has been resolved External. This means this issue may require a new feature to be implemented or other work that is more significant than a typical bug. You may be able to find more information on this issue by searching for related features on status.microsoftedge.com and uservoice.microsoftedge.com.

    • This issue is NOT resolved. My team built a previous app that we had to write a hundred lines of jquery to fix this issue. That was 1.5 years ago. We just finished a second app and have to do it all over again.

      Come on, if your not going to support modern web standards why do you even do this?

      Please don’t suck.

    • Fix this this please asap!

    • Dec 2017 Update. Edge desktop version still behind. BUT Edge Android version is the top 1. The Edge desktop version should learn from Edge Android team how to make browser.

    • Hamzah, just to clarify a misunderstanding.

      Edge Android and iOS use the native browser engine on those platforms, Chrome and Safari respectively.

      Not to discredit the edge mobile team. but the desktop team can’t learn from them because the desktop team literally creating an implementation of the spec where as the mobile team are providing non-engine Edge browser features on those platforms.

    You need to sign in to your Microsoft account to add a comment.

    Sign in