Bug 255338

Summary: REGRESSION (260399@main): animations flicker on https://payto.com.au
Product: WebKit Reporter: Antoine Quint <graouts>
Component: AnimationsAssignee: Antoine Quint <graouts>
Status: RESOLVED FIXED    
Severity: Normal CC: dino, graouts, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
URL: https://payto.com.au
See Also: https://bugs.webkit.org/show_bug.cgi?id=257861

Description Antoine Quint 2023-04-12 07:21:09 PDT
Visit https://payto.com.au and scroll down to the “Payments that keep business moving” section. The orange animated lines under each item flickers. They animate smoothly in Firefox.
Comment 1 Antoine Quint 2023-04-12 07:21:24 PDT
rdar://107532064
Comment 2 Antoine Quint 2023-04-12 07:24:41 PDT
This site ends up creating a CSS Transition for the same property that is also affected by a CSS Animation. Because the CSS Transition is created after the CSS Animation, it ends up overriding the CSS Animation even though the composite order is the other way around. We need to ensure that updating accelerated actions preserves the stacking order.
Comment 3 Antoine Quint 2023-04-12 07:26:52 PDT
Whether it is correct in this case to create CSS Transitions in this case is being discussed in https://github.com/w3c/csswg-drafts/issues/8701.
Comment 4 Antoine Quint 2023-04-12 07:40:54 PDT
Pull request: https://github.com/WebKit/WebKit/pull/12651
Comment 5 EWS 2023-04-12 11:10:51 PDT
Committed 262875@main (d566d000c7a5): <https://commits.webkit.org/262875@main>

Reviewed commits have been landed. Closing PR #12651 and removing active labels.