1929870 - Occasional FLIP animation flicker

Status: UNCONFIRMED

(Core :: DOM: Animation, defect)

Description

[Kevin Doughty]

Attachment: Screenshot from 2024-11-02 14-10-17.png

Steps to reproduce:

JSFiddle that shows occasional flicker during FLIP animation (manually constructed via Web Animations API) on slider drag:
https://jsfiddle.net/wxofypj0/

This also happens frequently using what I call Relative Animation (manually created Web Animations that animate from a delta to zero with additive or accumulate compsiting), when rapidly pressing the 6, 7, 8, and 9 number keys:
https://kevindoughty.gitlab.io/preact-sibling-animation/

Actual results:

Occasional flicker.

It might be due to interruptible layout not adding animations at the same time as value change. It might also be related to vsync but that is not a particularly informed opinion.

Atttached image captures flicker in action. The div is rendered partially offscreen to the left, outside of all possible prescribed values, suggesting to me the animation is added and its effect computed before the discrete value change.

Expected results:

Should not flicker. Chromium does not flicker.

FLIP and Relative Animation both animate from a delta to zero (or identity). Value and animation change need to happen simultaneously to be effective.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Animation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Kevin Doughty]

Failed to mention this is a very longstanding bug

Comment 3

[Mayank Bansal]

rapidly pressing 6 7 8 9 (in any order) keys will cause elements to flicker.
Repros with hw-wr/sw-wr so it is not a hardware thing.

Comment 4

[Mayank Bansal]

Attachment: bandicam 2024-11-07 21-25-03-989.mp4

Comment 5

[Kevin Doughty]

The gitlab site is not a minimal reproduction so I made a second fiddle that animates in the same way. The difference from the first fiddle is it does not call getBoundingClientRect, uses accumulate compositing instead of replace, and I gave it a cubic bezier timing function.
https://jsfiddle.net/ghr6a0ke/

Comment 6

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:boris, could you have a look please?

For more information, please visit BugBot documentation.

Comment 7

[Kevin Doughty]

Attachment: flicker on slider input

In-house version