Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

strokeDashoffset not working properly on browsers other than Chrome

See original GitHub issue

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 screenshot_1

video video

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:2
  • Comments:5

github_iconTop GitHub Comments

samuelgaudreaucommented, Feb 4, 2019

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?

bppdddqqqqcommented, Mar 9, 2020

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… image

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?)


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…

Read more comments on GitHub >

github_iconTop Results From Across the Web

svg stroke-dashoffset animation not working in safari or firefox
This animation of an svg works fine in chrome ...
Read more >
"stroke-dasharray" | Can I use... Support tables for ... - CanIUse
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
Read more >
933690 - stroke dashoffset is not working - Bugzilla@Mozilla
This issue has NOTHING TO DO WITH ANIMATIONS. It's simply a problem with hardware acceleration on Windows operating systems (maybe if you took...
Read more >
530095 - SVG stroke-dashoffset incorrect after property division
No Did this work before? N/A Does this work in other browsers? ... but the errors do look to be larger than that'd...
Read more >
TweenMax.staggerTo doesn't work correctly in safari - GSAP
I use TweenMax.staggerTo for drawing a circle with svg. It works perfect in all browser but safari. Can U please help me to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found