Bug 284526

Summary: [scroll-animations] https://scroll-driven-animations.style/demos/carousel-with-markers/css/ does not work
Product: WebKit Reporter: Antoine Quint <graouts>
Component: AnimationsAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: graouts, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on:    
Bug Blocks: 284525    
Attachments:
Description Flags
Standalone version of the demo none

Antoine Quint
Reported 2024-12-12 06:19:27 PST
The demos https://scroll-driven-animations.style/demos/carousel-with-markers/css/ does not work perfectly: the figurines are too small and dots are all pink on the last slide.
Attachments
Standalone version of the demo (5.58 KB, text/html)
2025-04-29 09:02 PDT, Antoine Quint 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2024-12-12 06:19:44 PST
<rdar://problem/141355957>
Antoine Quint
Comment 2 2025-04-29 06:06:48 PDT
There are two visual issues here. The dots are all using an animation associated with a scroll timeline and with a range to match a subsection of the scrolling container. When we get to the end, I think we end up hitting the "at progress timeline boundary" behavior specified in https://drafts.csswg.org/web-animations-2/#at-progress-timeline-boundary and make all animations have a progress of 1. I'm not sure whether that is the correct behavior. For the figurings sizing, that appears to be a sizing/layout issue that we need to split off in a separate bug.
Antoine Quint
Comment 3 2025-04-29 07:16:27 PDT
So I think we have the correct behavior here with regards to the at-progress timeline boundary, at least the way it's currently specified. That said, I don't think this is desirable, so I filed https://github.com/w3c/csswg-drafts/issues/12134.
Antoine Quint
Comment 4 2025-04-29 09:02:03 PDT
Created attachment 475077 [details] Standalone version of the demo
Note You need to log in before you can comment on or make changes to this bug.