287789 2025-02-17 02:27:37 -0800 [scroll-animations] "In & Out" demos of https://nerdy.dev/notebook/scroll-driven-animations.html mostly do not work 2025-02-21 01:25:21 -0800 1 1 1 Unclassified WebKit Animations WebKit Nightly Build Unspecified Unspecified RESOLVED FIXED https://github.com/web-platform-tests/wpt/pull/50838 InRadar P2 Normal --- 284525 1 graouts graouts graouts webkit-bug-importer oldest_to_newest 2095123 0 graouts 2025-02-17 02:27:37 -0800 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. 2095124 1 webkit-bug-importer 2025-02-17 02:27:58 -0800 <rdar://problem/144974803> 2096352 2 474309 graouts 2025-02-20 07:41:29 -0800 Created attachment 474309 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. 2096405 3 graouts 2025-02-20 09:59:10 -0800 Pull request: https://github.com/WebKit/WebKit/pull/40977 2096408 4 graouts 2025-02-20 10:04:50 -0800 Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/50838 2096660 5 ews-feeder 2025-02-21 01:25:19 -0800 Committed 290776@main (c7ec9d7ff067): <https://commits.webkit.org/290776@main> Reviewed commits have been landed. Closing PR #40977 and removing active labels. 474309 2025-02-20 07:41:29 -0800 2025-02-20 07:41:29 -0800 Candycane effect reduction view-timeline-candycane.html text/html 1716 graouts PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CjxtZXRhIGNoYXJzZXQ9InV0 Zi04Ij4KPG1ldGEgaHR0cC1lcXVpdj0ieC11YS1jb21wYXRpYmxlIiBjb250ZW50PSJpZT1lZGdl Ij4KPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5p dGlhbC1zY2FsZT0xLCBzaHJpbmstdG8tZml0PW5vIj4KCjx0aXRsZT48L3RpdGxlPgo8c3R5bGU+ Cgp1bCB7CiAgICB3aWR0aDogMjAwcHg7CiAgICBoZWlnaHQ6IDM4MHB4OwogICAgcGFkZGluZzog MDsKICAgIG92ZXJmbG93LXg6IGhpZGRlbjsKICAgIG92ZXJmbG93LXk6IHNjcm9sbDsKICAgIGJv cmRlcjogMXB4IHNvbGlkIGJsYWNrOwogICAgbGlzdC1zdHlsZTogbm9uZTsKfQoKbGkgewogICAg Ym94LXNpemluZzogYm9yZGVyLWJveDsKICAgIHBhZGRpbmc6IDEwcHg7CiAgICBiYWNrZ3JvdW5k OiBncmF5OwoKICAgIHdpZHRoOiAxMDAlOwogICAgaGVpZ2h0OiAzOHB4OwoKICAgIGFuaW1hdGlv bjogY2FuZHljYW5lIGxpbmVhciBib3RoOwogICAgYW5pbWF0aW9uLXRpbWVsaW5lOiB2aWV3KCk7 Cn0KCnVsIGxpOm50aC1jaGlsZChldmVuKSB7CiAgICBiYWNrZ3JvdW5kOiBsaWdodGdyYXk7Cn0K CkBrZXlmcmFtZXMgY2FuZHljYW5lIHsKICAgIGVudHJ5IDAlIHsgbWFyZ2luLWxlZnQ6IC0yMDBw eCB9CiAgICBlbnRyeSAyMDAlIHsgbWFyZ2luLWxlZnQ6IDAgfQogICAgZXhpdCAtMTAwJSB7IG1h cmdpbi1sZWZ0OiAwIH0KICAgIGV4aXQgMTAwJSB7IG1hcmdpbi1sZWZ0OiAyMDBweCB9Cn0KCjwv c3R5bGU+CjwvaGVhZD4KPGJvZHk+Cgo8dWw+CiAgICA8bGk+MTwvbGk+CiAgICA8bGk+MjwvbGk+ CiAgICA8bGk+MzwvbGk+CiAgICA8bGk+NDwvbGk+CiAgICA8bGk+NTwvbGk+CiAgICA8bGk+Njwv bGk+CiAgICA8bGk+NzwvbGk+CiAgICA8bGk+ODwvbGk+CiAgICA8bGk+OTwvbGk+CiAgICA8bGk+ MTA8L2xpPgogICAgPGxpPjExPC9saT4KICAgIDxsaT4xMjwvbGk+CiAgICA8bGk+MTM8L2xpPgog ICAgPGxpPjE0PC9saT4KICAgIDxsaT4xNTwvbGk+CiAgICA8bGk+MTY8L2xpPgogICAgPGxpPjE3 PC9saT4KICAgIDxsaT4xODwvbGk+CiAgICA8bGk+MTk8L2xpPgogICAgPGxpPjIwPC9saT4KPC91 bD4KCjxzY3JpcHQ+CgooYXN5bmMgZnVuY3Rpb24gKCkgewogICAgY29uc3QgYW5pbWF0aW9ucyA9 IGRvY3VtZW50LmdldEFuaW1hdGlvbnMoKTsKICAgIGF3YWl0IFByb21pc2UuYWxsKGFuaW1hdGlv bnMubWFwKGFuaW1hdGlvbiA9PiBhbmltYXRpb24ucmVhZHkpKTsKCiAgICBjb25zb2xlLmxvZyhh bmltYXRpb25zWzBdLmVmZmVjdC5nZXRLZXlmcmFtZXMoKSk7CgogICAgYW5pbWF0aW9ucy5mb3JF YWNoKChhbmltYXRpb24sIGluZGV4KSA9PiB7CiAgICAgICAgY29uc29sZS5sb2coYFske2luZGV4 fV0gdGltZWxpbmUgPSAke2FuaW1hdGlvbi50aW1lbGluZS5jdXJyZW50VGltZS50b1N0cmluZygp fSwgYW5pbWF0aW9uID0gJHthbmltYXRpb24uY3VycmVudFRpbWUudG9TdHJpbmcoKX0sIHByb2dy ZXNzID0gJHthbmltYXRpb24uZWZmZWN0LmdldENvbXB1dGVkVGltaW5nKCkucHJvZ3Jlc3N9LCBt YXJnaW4tbGVmdCA9ICR7Z2V0Q29tcHV0ZWRTdHlsZShhbmltYXRpb24uZWZmZWN0LnRhcmdldCku bWFyZ2luTGVmdH1gKTsKICAgIH0pOwp9KSgpOwoKCjwvc2NyaXB0PgogIAo8L2JvZHk+CjwvaHRt bD4KCgoK