Bug 287789

Summary: [scroll-animations] "In & Out" demos of https://nerdy.dev/notebook/scroll-driven-animations.html mostly do not work
Product: WebKit Reporter: Antoine Quint <graouts>
Component: AnimationsAssignee: Antoine Quint <graouts>
Status: RESOLVED FIXED    
Severity: Normal CC: graouts, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://github.com/web-platform-tests/wpt/pull/50838
Bug Depends on:    
Bug Blocks: 284525    
Attachments:
Description Flags
Candycane effect reduction none

Antoine Quint
Reported 2025-02-17 02:27:37 PST
The page https://nerdy.dev/notebook/scroll-driven-animations.html contains a fair few view timelines showcases and while all examples in the "Entrances" section work fine in WebKit, the "In & Out" section has a lot of different behavior between Chrome and WebKit. Those need investigating.
Attachments
Candycane effect reduction (1.68 KB, text/html)
2025-02-20 07:41 PST, Antoine Quint 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2025-02-17 02:27:58 PST
<rdar://problem/144974803>
Antoine Quint
Comment 2 2025-02-20 07:41:29 PST
Created attachment 474309 [details] Candycane effect reduction Started looking at just the "Candycane" example and I've attached a reduction with some console logging. The timeline and animation current times appear to be as expected. However, the computed progress is completely different in WebKit compared to Chrome, which directly maps to the margin-left value that is applied in style. It appears the issue is that we're not computing keyframes correctly. This is the keyframes rule specified in CSS: ``` @keyframes candycane { entry 0% { margin-left: -200px } entry 200% { margin-left: 0 } exit -100% { margin-left: 0 } exit 100% { margin-left: 200px } } ``` In Chrome, the offsets are computed as: entry 0% → 0 entry 200% → 0.18181818181818182 exit -100% → 0.8181818181818182 exit 100% → 1 In WebKit, the offsets are computed as: entry 0% → 0 exit 100% → 1 This indicates faulty logic in our parsing code dropping keyframes where the percentage value is not comprised in the [0%-100%] range.
Antoine Quint
Comment 3 2025-02-20 09:59:10 PST
Pull request: https://github.com/WebKit/WebKit/pull/40977
Antoine Quint
Comment 4 2025-02-20 10:04:50 PST
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/50838
EWS
Comment 5 2025-02-21 01:25:19 PST
Committed 290776@main (c7ec9d7ff067): <https://commits.webkit.org/290776@main> Reviewed commits have been landed. Closing PR #40977 and removing active labels.
Note You need to log in before you can comment on or make changes to this bug.