Animation not playing in IE and Edge

marionebl / svg-term-cli

Share terminal sessions via SVG and CSS

MIT License

3.48k stars 116 forks source link

Animation not playing in IE and Edge #11

Closed marionebl closed 4 years ago

marionebl commented 6 years ago

In IE 11 and MS Edge animations are not playing. This is caused by missing support for the css transform property on SVG.

The suggested workaround of using the transform attribute instead is not available to us, as we can't run JavaScript when embedding via <img>.

Currently I can't see a solution where we actually play animation for IE/Edge. A fallback to a static frame of the users choosing might be achievable via @supports

marionebl commented 6 years ago

Another idea: A very early version implemented the animation by animating all the frames on separate timelines and switching opacity from 0 to 1 for one frame at a time. I switched to the current implementation because running a big number of CSS animations was slow.

ToDo:

[x] Do an experimental implementaiton with opacity, recheck IE compat
[x] Experiment with ways to make it fast, e.g. by sharing @keyframe and differentiating via animation-delay and animation-duration.

ie-compat-stack-animation

Works okay: https://codepen.io/marionebl/pen/ypqVpm
Thorny issue: Can only be played once

pixelass commented 6 years ago

Here's a working implementation of the opacity concept (https://github.com/marionebl/svg-term-cli/issues/11#issuecomment-355266795)

https://github.com/pixelass/svg-term/commits/bug/svg-term-cli_issue-11

Sadly this creates severe performance issues. (as mentioned in https://github.com/marionebl/svg-term-cli/issues/11#issuecomment-355266795) Each frame runs an animation, therefore 200 frames would run 200 animation simultaneously. This can easily be reproduced with the "commitlint.svg" example.

works in Edge
does not work in ie11 (css-variables are required)

pixelass commented 6 years ago

Edge is working on the feature: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/supportcsstransformsonsvg/

marionebl commented 6 years ago

Thanks @pixelass for trying out the opacity idea.

More information about windows / cross browser issues: https://github.com/bokub/chalk-animation/pull/12

henryruhs commented 4 years ago

I think it's okay to close this as of Chromium powered Edge had been released.