Bug 258897

Summary: [svg] Multiple fragments of animation drawn in parallel rather than start to end like Chrome & Firefox
Product: WebKit Reporter: Ahmad Saleem <ahmad.saleem792>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: RESOLVED MOVED    
Severity: Normal CC: 1wheel, bfulgham, dino, graouts, graouts, sabouhallawa, webkit-bug-importer, zimmermann
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
URL: https://codepen.io/justinresources/pen/ExOWzNv
See Also: https://bugs.webkit.org/show_bug.cgi?id=259415
Attachments:
Description Flags
Reduction none

Description Ahmad Saleem 2023-07-05 12:20:41 PDT 
Hi Team,

I came across following test case on StackOverlfow. Refer to URL field for test case.

WebKit ToT & Safari 16.5.1 are drawing the graph with three fragments while Chrome and Firefox draw it as intended from start till finish.

StackOverflow Post: https://stackoverflow.com/questions/76581192/svg-animation-bug-in-safari

Just wanted to raise so we can track it.

Thanks!
Comment 1 Radar WebKit Bug Importer 2023-07-12 12:21:17 PDT 
<rdar://problem/112151478>
Comment 2 Antoine Quint 2023-07-13 01:48:42 PDT 
Retitling to clarify this doesn't have anything to do with SVG Animations since CSS Animations are used here. However, my bet is that this is purely an SVG issue with how we compute stroke-dashoffset here, but it could technically be an issue with how we animate that property.
Comment 3 Antoine Quint 2023-07-13 06:01:48 PDT 
Created attachment 467031 [details]
Reduction
Comment 4 Antoine Quint 2023-07-13 06:02:38 PDT 
This is strictly an SVG issue, see the reduction attached which just uses a static stroke-dashoffset value. I expect this is some odd interaction with the pathlength attribute.
Comment 5 Ahmad Saleem 2023-07-13 06:07:15 PDT 
(In reply to Antoine Quint from comment #4)
> This is strictly an SVG issue, see the reduction attached which just uses a
> static stroke-dashoffset value. I expect this is some odd interaction with
> the pathlength attribute.

Thanks @Antoine, apologise, I didn't go much in details or investigate, I just thought to capture it and look into later. So appreciate your help on deep analysis.
Comment 6 Antoine Quint 2023-07-13 07:35:42 PDT 
I'm starting to think this is a CG bug or limitation, as the issue goes away if I remove one of the draw commands, which makes the number of segments in PathStream::applySegments() go from 257 to 256 and magically everything is fine.
Comment 7 Antoine Quint 2023-07-13 07:37:01 PDT 
Interestingly the MDN demo for pathLength doesn't render at all in Safari: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength.
Comment 8 Simon Fraser (smfr) 2023-07-31 10:23:43 PDT 
*** Bug 259415 has been marked as a duplicate of this bug. ***
Comment 9 Brent Fulgham 2023-12-21 15:17:00 PST 
The fix for this issue needs to be made outside of the WebKit Open Source project. Resolving as MOVED.

This work is being tracked under <rdar://problem/113436247>