1882886 - Calling scrollIntoView on an element that is being animated breaks the animation.

Status: NEW

(Core :: CSS Transitions and Animations, defect)

Description

[mert.akinc]

Attachment: animation_bug_ff2.gif

Steps to reproduce:

See Stackblitz: https://stackblitz.com/edit/stackblitz-starters-ydmp5r?file=index.html,styles.css,script.js

• I use CSS animation to have a div slide into view from the right.
• While the animation is in progress, I call scrollIntoView on another div inside the animating div. (There is no functional reason to call scrollIntoView in this example scenario.)

Actual results:

If my mouse cursor is not over the view:

• The animating div jumps left, to near its final position, and some static text just above the animating div disappears.
• The div continues sliding to the left, out of view.
• When the animation duration (1sec) ends, the div jumps back to its final position, fully in view, and the text above that had disappeared now reappears.

If my mouse cursor is over the view:

• The animating div jumps left, to near its final position, and some static text just above the animating div disappears.
• For the rest of the animation duration, repetitively: the div slides left a bit then jumps back right, while the above text jumps right a bit.

Expected results:

The div should have continued sliding in from the right, smoothly and without interruption. The text above should never have moved.

Comment 1

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

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

Comment 2

[Daniel Holbert [:dholbert]]

hiro or boris, maybe you could take a look here? (is this a known issue with scrolling and/or animations?)

Comment 3

[Hiroyuki Ikezoe (:hiro)]

The CSS animation is "translate(100%) -> translate(0%)", which means before the animation starts the initial transform value is "none", which is equivalent with "translate(0%)" (basically, it creates a stacking context though). Once the animations started, it makes the root scroll container overflow, you can tell it by seeing there's the horizontal scrollbar appears. And then the scrollIntoView() tries to the "translate(100%)" (or some amount of translated) div scroll into the view. That's the reason why the static text is out of view at the moment, it is in fact scrolled out.

I am totally unsure whether we should fix this, the current behavior is kinda reasonable, but yeah it's awkward though.

Comment 4

[Boris Chiou [:boris]]

Attachment: testcase

The testcase from https://stackblitz.com/edit/stackblitz-starters-ydmp5r?file=index.html,styles.css,script.js

Comment 5

[Boris Chiou [:boris]]

For the case when the mouse cursor is not over the view, it looks like we are pretty similar to the result on WebKit. (Just like Hiro mentioned, it may be reasonable but awkward.) However, after disabling the compositor animations, the result looks similar to Blink...

For the case when the mouse cursor is over the view, I suspect this may be a bug related to compositor animations when we are trying to sync it with main thread animations. When there are mouse events, we run the main thread animation to sync it, IIRC. However, we don't do it well. This may be an existing bug. I just did a hack that disable all the compositor animations, and the result looks much better, and it's the same as Blink.

Edited: We have bunch of bugs related to the sync of compositor animations, for transitions and animations. They are not easy to fix and we probably should take a look at all of them together.