Giters

anup-a / svgwave

SVG Wave is a tiny, free and beautiful SVG gradient waves generator for your next design.

Home Page:https://www.svgwave.in

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Animation doesn't seem to work in Firefox (latest version) Browser

cumulustechnologies opened this issue · comments

commented

This is an excellent project but I've run into an issue where the SVG animation doesn't work in Firefox.

I did a google search and found that Firefox implements the SVG animation process more rigidly than Chrome and that values that start with a . (period) need to be replaced with 0. in order to work...

But I can't see where I would need to make the change, can you advise (or make a fix) for Firefox browsers?

Thanks

commented

@cumulustechnologies Thanks for pointing it out. I can reproduce the issue. I didn't notice it earlier since I never use firefox.

I will definitely try to fix it as soon as possible.

commented

Thanks a lot, would love to be able to use this going forward!

The issue also seems to exist in Safari and I imagine that the fix for one will work in both browsers. I did a search and apparently, Firefox is more strict in the way it interprets animation values inputs so this could be the issue with both browsers, but I am clueless on SVG animations so...

commented

I investigated this issue and apparently CSS svg path data is only supported on chrome.

property name d:path() is not implemented in Firefox or Safari. This is only working in Blink browsers.

Similar issue - webcompat/web-bugs#53814

W3C Discussion - w3c/svgwg#320

We will have to figure out an alternative cross browser solution.

commented

Hello there, I'm on Firefox v97.0 and everything works fine now

Thanks for the awesome tool !