1774814 - Transition breaks if you start another right when previous ends

Status: RESOLVED DUPLICATE of bug 1626165

(Core :: CSS Transitions and Animations, defect, P2)

Description

[mapuut]

Attachment: test.html

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:101.0) Gecko/20100101 Firefox/101.0

Steps to reproduce:

Animate object with transition. For example change any property like opacity, margin, transform with transition. Lets say we have box with transformY transition of 1s, it's initial position is 0. Now we set it to 500 with class or inline styles, doesn't matter. in 0.5s it's position would be 250 and in 1s it would be 500. If in the middle of transition lets say on 0.5 second we set new position to -200, then it would start moving from position 250 to -200, as expected. Now the bug comes in when we change destination exactly at the same time when last transition finished. So in this example it would be at position 500 finishing the transition, and now when we set it to -200 and if the timing is perfect it just immediately jumps to -200. I included simple demonstration with red box. It should never jump everything should be smooth always. Only transform value is being changed. But about 10% of the time it just cut jumps to next transition end result. It works with any property not only transition.

Comment 1

[mapuut]

Sorry my bad, it's actually lot worse then I described, even when timing is not perfect but anywhere before or after animation end, about 400ms both ways is what i tested, behavior is chaotic and inconsistent.

Comment 2

[mapuut]

Here is another example of weird and inconsistent behavior related to transitions - https://mapuut.net/file/public/temp/test400.html

If you move your mouse inside the page animation is consistent and smooth, if you stop moving mouse or take it outside the page animation starts jumping.

Comment 3

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Hello, thank you for reporting!
I was able to reproduce this issue using the testcases provided in the Description and comment 2 on:

• Firefox 102;
• Firefox 103;
• Firefox 91.11.0ESR;
• Firefox 102.0ESR;

Tested on:

• macOS 11.6;
• Ubuntu 22.04;
• Windows 10 x64;

I'm setting the Product to Core and the component to Graphics, please feel free to change it to a more appropiate one if that is the case.
I'm setting this as NEW and wait for the developer's opinion about it.

Comment 4

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

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

For more information, please visit auto_nag documentation.

Comment 5

[Bob Hood [:bhood]]

Hiro, this isn't sounding to me like it's a Core::Graphics issue. Any chance you could narrow this down a little better?

Comment 6

[Hiroyuki Ikezoe (:hiro)]

Thank you, Bob. Yeah I am almost 100% sure this is an issue in our transition implementation. I guess this is another variant of bug 1626165.

Hey mapuut, thanks for reporting this bug. Would you mind checking whether the jump is still observable with setting layers.offmainthreadcomposition.async-animations false? If it solves the issue, bug 1626165 will fix it.

Comment 7

[mapuut]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #6)

Thank you, Bob. Yeah I am almost 100% sure this is an issue in our transition implementation. I guess this is another variant of bug 1626165.

Hey mapuut, thanks for reporting this bug. Would you mind checking whether the jump is still observable with setting layers.offmainthreadcomposition.async-animations false? If it solves the issue, bug 1626165 will fix it.

Hi, yes turning this setting to false seems to solve the problem (although results in less smooth animation which I guess is expected behavior).

Comment 8

[Hiroyuki Ikezoe (:hiro)]

Thanks!

(In reply to mapuut from comment #7)

Hi, yes turning this setting to false seems to solve the problem (although results in less smooth animation which I guess is expected behavior).

Yeah, your feeling is quite right. Basically disabling layers.offmainthreadcomposition.async-animations makes animations less smooth.