Line Animation: drawSVG from 0 to 100% shows gap on Safari

[isarcode]

Hey guys,

I use drawSVG plugin to draw a  line. Works perfect but on Safari on Mac in shows a gap. Looks like a wrong animated stroke-dash. Any ideas to fix it?

See the Pen GRVpxPX by Marvin-Dent (@Marvin-Dent) on CodePen.

[mvaneijgen]

Hi @isarcode welcome to the forum and thanks for being a club member 🎉

 

For us it is a bit hard to interpret "looks wrong", do you maybe have a screen shot comparing the two browsers. I've tested both Safari and Chrome and do me it looks the same, but I don't know what I'm looking for? 

 

I've forked your pen, brought it back to the bare minimum and I cant see anything wrong comparing the two browsers. Can you maybe elaborate more on what you see and what you expect should happen. Hope it helps and happy tweening! 

 

See the Pen eYqpKBL by mvaneijgen (@mvaneijgen) on CodePen.

[isarcode]

Hi @mvaneijgen, thank you for this quick response. And sorry for less detailed request.

Here is a screenshot of my problem. It should be a line drawing from 0 to 100. But in Safari it has a gap and looks like two lines instead of one.

 

I used your forked pen. OSX Sequoia 15.0, Safari 18, on MacBook Air M2.

(Was the same last week on previous OS)

 

Safari on iPadOS and iOS has no issues.

 

[GreenSock]

4 hours ago, isarcode said:

Here is a screenshot of my problem. It should be a line drawing from 0 to 100. But in Safari it has a gap and looks like two lines instead of one.

 

I just checked on an iPhone and MacBook Pro in Safari and I cannot replicate that issue. Can you please provide more details? I wonder if you have some kind of browser plugin that's interfering or a beta version of Safari with bugs(?)

[isarcode]

Hey @mvaneijgen + @GreenSock,

 

After testing again on a similar Macbook, I was able to find out that a minimal zoom in Safari was the cause of the weird behavior.

 

Thanks a lot for your support ☺️

Next time I will test on a similar device first to rule this out.