Bug 258897 - [svg] Multiple fragments of animation drawn in parallel rather than start to end like Chrome & Firefox
Summary: [svg] Multiple fragments of animation drawn in parallel rather than start to ...
Status: RESOLVED MOVED
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL: https://codepen.io/justinresources/pe...
Keywords: BrowserCompat, InRadar
: 259415 (view as bug list)
Depends on:
Blocks:
 
Reported: 2023-07-05 12:20 PDT by Ahmad Saleem
Modified: 2023-12-21 15:17 PST (History)
8 users (show)

See Also:


Attachments
Reduction (4.99 KB, text/html)
2023-07-13 06:01 PDT, Antoine Quint
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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>