Stroke dash array/offset do not animate properly in Safari

[alexjlockwood]

Compare the behavior of the following JS fiddle animation in Chrome vs. Safari (click on the icons to begin the animation): https://jsfiddle.net/alexjlockwood/79zh7228/6/

Using web-animations-js v2.2.2.

There are a number of other examples that show the same behavior here as well: http://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html

[alexjlockwood]

Here is a video of the non-buggy behavior I see in Chrome: https://youtu.be/u2iViqqx1OI

And here is a video of the buggy behavior I see in Safari: https://youtu.be/v_Tx2peDnB8

[alancutter]

Looks like Chrome works fine because it's using native, when forcing the polyfill (by using the dev.js version) the buggy behaviour is seen in Chrome.
https://jsfiddle.net/86126am2/

[alancutter]

Seems the polyfill just doesn't have a handler for strokeDasharray: https://github.com/web-animations/web-animations-js/search?utf8=%E2%9C%93&q=strokeDasharray&type=Code

[alexjlockwood]

Any updates on this?

[alexjlockwood]

This bug does not seem like it has been fixed to me. Can you confirm that the updated jsfiddle animation works as expected in Safari? I updated the dependency to v2.2.5 and I'm still seeing the same behavior.

https://jsfiddle.net/alexjlockwood/79zh7228/

[alexjlockwood]

I also still see the same behavior in Chrome when I use the dev.js version: https://rawgit.com/web-animations/web-animations-js/dev/web-animations.dev.js

[alancutter]

Looks like support for unitless values is missing. Confirmed that adding 'px' to the example makes it work in the polyfill: https://jsfiddle.net/79zh7228/8/

[scttcper]

Can confirm adding units fixed the issue for me. https://scttcper.github.io/ngx-trend/ line should animate on page load