strokeDashoffset not working properly on browsers other than Chrome

Describe the bug A clear and concise description of what the bug is. I am using strokeDashoffset:[anime.setDashoffset, 0] property, and it’s not working properly on Edge and Firefox. It supposed to give full offset, so there will be no strokes. But, as you can see in the videos, in Edge and Firefox, there are little dots on the screen, which are the corner of pathes.

To Reproduce Steps to reproduce the behavior:

you can clone the repo and open it in Edge or Firefox.

github repo

1. clone
2. Open in Firefox or Edge
3. press ctrl and + for seeing clearly

Screenshots

video video

[samuelgaudreau]

Same thing is happening to me 😦 Anyone know a fix to this issue? Is there a problem with the svg or is the function “strokeDashoffset” for Chrome only?

[bppdddqqqq]

The bug

The issue seems to be related to the way Animejs calculates strokeDashArrayOffset and strokeDashOffset. strokeDashArrayOffset is calculated in raw float values which are prone to inaccuracy errors, yet strokeDashOffset is correctly calculated as a float with fixed floating decimal length (3). Setting strokeDashArrayOffset to a fixed floating decimal length should remedy issue, because it fixed most of the cases…

Image as an example, the incorrect “point” lies in France near Belgium…

Another issue is that this issue is fully reproducible in Chrome, not only Firefox and Edge. But this issue seems to be rare on Chrome since the issue only on fewer cases and it’s platform specific to Windows. On Mac this issue haven’t appeared (maybe different graphics API?)

Workaround

Temporary workaround is to set Stroke color to transparent and change it to the default color via stroke: { value: COLOR, duration: 1}. This remedies the issue on all affected browsers, methinks…