SVG handwriting animation doesn't render correctly on Edge

[alexpi]

Hello, 

 

I made this handwriting type animation using <clipPath>ed letters and moving mask paths, done with GSAP. It renders correctly in every browser I tested, but not on Edge. Edge seems to clip every clipPath letter to a small shape. I don't know if this problem is related to GSAP, but every idea on this matter would be greatly appreciated!

 

 

See the Pen xEzyAo by alexpi (@alexpi) on CodePen

[Jonathan]

Hello alexpi, and Welcome to the GreenSock forum!

Thank you for the example, very helpful .. please standby while we try to offer a solution!

 

[GreenSock]

Very cool animation. Slick.

 

I don't have a lot of time to research at the moment, but two quick things come to mind:

1. You might want to read the posts here: http://greensock.com/forums/topic/13681-svg-gotchas/?p=65150. Blake's comment was related to masks, so it may not be relevant with clipping paths, but perhaps you'll find something there that's worth trying. 
2. I noticed that you're not using DrawSVGPlugin, but instead you're directly animating the strokeDashoffset which is totally fine but I remember running into some bugs/problems in Microsoft browsers and implementing workarounds inside of DrawSVGPlugin. In other words, it might behoove you to try DrawSVGPlugin and see if it resolves the issue for you. Try it out on codepen for free (any of the bonus plugins) - here are the URLs: http://codepen.io/GreenSock/full/OPqpRJ/

Let us know if that helps at all.