Bug 255338 - REGRESSION (260399@main): animations flicker on https://payto.com.au
Summary: REGRESSION (260399@main): animations flicker on https://payto.com.au
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Antoine Quint
URL: https://payto.com.au
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-04-12 07:21 PDT by Antoine Quint
Modified: 2023-06-12 03:29 PDT (History)
3 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

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