homepage svg doesn't play on safari

[marcstreeter]

When I output svg's using the termtosvg tool the files do work in safari. Not sure why the webpage's svg doesn't play.

[nbedos]

Thanks for reporting this.

Are we talking about the animation at https://nbedos.github.io/termtosvg/ or the one at https://github.com/nbedos/termtosvg ?

[karljohns0n]

It's indeed not working on Safari iOS 13.4.

[nbedos]

I don't have access to a machine running macOS so unfortunately I can't do much about it.

[NPrescott]

The issue is specific to this SVG, the console reports:

TypeError: document.getElementById("screen_view").animate is not a function. (In 'document.getElementById("screen_view").animate(
    termtosvg_vars.transforms,
    termtosvg_vars.timings
)', 'document.getElementById("screen_view").animate' is undefined)
Global Code — awesome_window_frame_js.svg:193

Which indicates the issue lay in this browser API. You can enable it in the browser via Develop / Experimental Features / Web Animations. Tested and confirmed it works with this feature enabled in Safari 12.0.3.

[zmwangx]

I noticed the same problem and tracked it down. It seems Safari doesn't support scripting in svg when used in an img tag, probably due to security considerations; but scripting is allowed when used in an object tag.

Trivial reproduction:

<img src="https://nbedos.github.io/termtosvg/examples/awesome_window_frame_js.svg">
<object data="https://nbedos.github.io/termtosvg/examples/awesome_window_frame_js.svg">

The upper one does not animate, the lower one does.

Not sure what can be done about it.

[marcstreeter]

https://nbedos.github.io/termtosvg/ works in safari
https://github.com/nbedos/termtosvg does not animate in safari

there were some changes recently to safari that I may now have https://webkit.org/blog/10266/web-animations-in-safari-13-1/

which I probably didn't have enabled when I first issued this bug