Anime: strokeDashoffset not working properly on browsers other than Chrome

[DavudSafarli]

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?

[dnspnjrs]

I'm also having this issue. The stroke-dasharray and stroke-dashoffset are equal but the values are not calculated correctly. I also see that "stroke-linecap" makes this problem worse as there is always a dot visible.

Trying to find a solution.

Edit: I think it has to do with the way getPolylineLength() calculates the length of the path and sets the dashoffset and dasharray.

Edit2: In my svg the calculation of the polyline needed to take in account the stroke width. I fixed it by adding twice the stroke thickness ( corresponding with the end-caps )

[Cy-Tek]

@dnspnjrs How exactly did you fix the calculation.

Did you fix it at design time inside the svg editor, or did you fix it in code?

If you fixed this with code, are you able to share a sample of how you did so? I am encountering this same issue and would love to see an example of how you fixed that!

[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...

[bppdddqqqq]

@juliangarnier