SMIL Animation in Microsoft Edge not animating

[toastal]

I saw this bug out for Edge detection. It appears that this repo has the correct detection, but the JS running the actual animations doesn't appear to be working. This polyfill works fine in Internet Explorer, but I'm going to need to come up with some sort of fallback for Edge users at this time. We're in a strange juncture where Chrome's deprecating SMIL and Edge has no interest in SMIL opting for the not-yet-complete-or-implemented web animations, but I had a SMIL thing working cross-browser in prod and now it's not.

[HelderMagalhaes]

this repo has the correct detection, but the JS running the actual animations doesn't appear to be working

Please test again with the latest available code: a few fixes (targeting IE and generic) were made. If it still doesn't work, please attach a (reduced, if possible!) test case and detail which animations don't work in Edge (together with FakeSmile and Edge versions used in testing).

[anarchimedes]

Looks like document.implementation.hasFeature(x, y) in MS Edge returns true for any strings x, y

[anarchimedes]

Modernizr(smil) returns false in MS Edge so its possible to workaround the problem using additional library and extra conditions in smil.user.js

[HelderMagalhaes]

Modernizr(smil) returns false in MS Edge

Modernizr attempts to create an animate element in the SVG namespace to detect SMIL support. We're already using it in smil.check.js so reusing it might work. Nevertheless, additional testing needs to be done because if document.implementation is broken, then other required APIs may be missing/broken as well...

[HelderMagalhaes]

So, I've made some research and hasFeature was recently (~2014) deprecated. The alternative suggestion for web developers is:

Use modern feature detection for whichever feature you're interested in

The link in the above quoted text contains several interesting links to (MDN article, W3C discussion and current spec. wording).

This explains why I wasn't able to find any Edge-related bug reports or other kinds of complains regarding lack of support.

Looks like document.implementation.hasFeature(x, y) in MS Edge returns true for any strings x, y

This seems aligned with the current spec. text, where hasFeature simply returns true. According to MDN, though, Chrome 44 always returns false.

The proposal is to rework our code which uses hasFeature to create an element of each of the required namespaces instead (Modernizr style). It shouldn't cause any major performance hit, as results are currently being cached.

[marcelkalveram]

SMIL animations are still not working for me in Edge. I'm using the polyfill successfully in IE9-11 but Edge refuses to play any animations.

I guess that still has to do with the browser detection you guys have discussed above but I'm not sure how to tackle this without going into the plugin core and figuring out where the detection takes place. I might find some time to do this soon but I was wondering if there's any quick fix to enable animations in Edge?

[HelderMagalhaes]

any quick fix to enable animations in Edge?

This will likely work (it's an extract of what I'm currently working on):

1. Open the script

2. Locate the following line:

   ns2proc[svgns] = !impl.hasFeature("http://www.w3.org/TR/SVG11/feature#Animation", "1.1"); //&& !impl.hasFeature("org.w3c.svg.animation", "1.0");

3. Replace it with the following:

   ns2proc[svgns] = (document.createElementNS(svgns, "animate").toString().indexOf("SVGAnimate", 8) === 8);

I'd welcome feedback regarding this fix (whether it worked or, if not, in which circumstances).

[HelderMagalhaes]

@ledahulevogyre: Do you recall which implementations support "less common namespaces" for which we currently use hasFeature?

• http://www.w3.org/2001/smil-animation
• http://www.w3.org/2001/SMIL20
• http://www.w3.org/2005/SMIL21
• http://www.w3.org/ns/SMIL30
• http://www.w3.org/2007/07/SMIL30/Timesheets

If there are known examples which use them, that would also be quite handy. Thanks!

[BishopBarber]

@HelderMagalhaes The fix you mention above does not work for me. What made it work for me was to build the Modernizr code for SVG SMIL and then take the line that interested me and tweak it a bit. So I ended with:

ns2proc[svgns] = !(document.createElementNS && /SVGAnimate/.test(document.createElementNS("http://www.w3.org/2000/svg", "animate")));

[davthu]

@BishopBarber I think you are missing an explanation mark at the start of the assignment

[BishopBarber]

@davthu I'm unsure I correctly understand your statement. Do you mean "exclamation mark"? If so, are you talking about my implementation or about HelderMagalhaes' that didn't work for me?

[davthu]

@BishopBarber Yes I ment "exclamation mark" Thanks for the correction :-) There is nothing wrong with your code snippet, just that in the Modernzr original source they put a double exclamation mark in front of the expression, but Im not sure why...

[vishalaghera]

@BishopBarber
Thanks it's working for me

[HelderMagalhaes]

[...] they put a double exclamation mark in front of the expression, but Im not sure why...

The double exclamation mark is just a "trick" for making sure the result is a pure boolean. (reference)

[HelderMagalhaes]

Update: confirmed that this issue occurs up to the latest (last?) version of EdgeHTML. If anyone has compatibility issues using "Edgium" (Chrome-based Edge), please file a separate issue.

Edge version (... --> Settings --> About this app):

• Microsoft Edge 44.18362.1.0
• Microsoft EdgeHTML 18.18362

Windows version (Win+R, type winver and press OK):

• Windows 10 (Pro)
• Version 1903 (OS Build 18362.145)