search

juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
49.6k stars 3.67k forks source link

Line Drawing - IE11 buggy rendering #278

Closed kh82 closed 5 years ago

kh82 commented 6 years ago

Hello,

See attached files for two examples.

This is an icon of a lock, with the top curved part animating as a line drawing. This works in Chrome/Firefox but not IE11/Edge. line-drawing-anime.zip

This is a world/phone icon. Partial / no animation in IE11 until the icon is clicked. line-drawing-anime-2.zip

I have about a dozen of these icons, a lot of which have rendering issues in IE/Edge. Any help to diagnose this issue would be appreciated. Not sure if it's Animejs, bad SVG files or just IE being a pain.

Thank you

juliangarnier commented 6 years ago

Can you export your example to codepen? That way I can use online tools like crossbrowsertesting.com to test it on Edge (I'm on a mac OS).

Thanks!

jeroenrinzema commented 6 years ago

I created the two examples in codepen:

example 1: https://codepen.io/jeroenrinzema/pen/VrWYVg

example 2: https://codepen.io/jeroenrinzema/pen/EbXaeQ

kh82 commented 6 years ago

Thank you for creating the codepen for me.

The SVG came from the client and we added classes to the parts we wanted to animate. I think our designer re-drew the top hook of the lock, and we reversed the points in the S of the dollar sign so it would animate top to bottom. I've tried exporting the SVGs from Illustrator (with different options) and Inkscape, but it's always buggy / not working.

It's also not working properly in Edge.

GeorgesGITHUB commented 5 years ago

Is this still a problem?

kh82 commented 5 years ago

I no longer work at the company that was involved with this, I don't have access to the source code anymore and it was never enabled in a live environment because of this issue.I will close the thread, although I assume this will still be an issue for others if it hasn't been fixed by the latest versions.

Thank you