termtosvg
termtosvg copied to clipboard
homepage svg doesn't play on safari
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.
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 ?
It's indeed not working on Safari iOS 13.4.
I don't have access to a machine running macOS so unfortunately I can't do much about it.
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.
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.
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