1991967 - When scrolling during a View Transition, the animated pseudos don’t respond to scroll

Status: NEW

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Bramus]

Steps to reproduce:

1. Visit https://codepen.io/bramus/pen/KwVMMdr/510ccfa2f1599ac75233d78eb0376333
2. Click the document
3. Scroll halfway down while the View Transition is running

Actual results:

The animated ::view-transition-group() pseudo does not move along with the scroll. It remains fixed against the viewport.

As a result, at the end of the transition, you see a glitch between the pseudo’s final animation position to the position of the actual element in the DOM.

I think this is because the Snapshot Containing Block is not moving along with the scroll.

Expected results:

While scrolling, the animated ::view-transition-group() pseudo should move along with the scroll. This is the case in Chrome and Safari.

One can work around this by manually offsetting the entire ::view-transition pseudo during the scrolling (you can achieve this by hitting the checkbox at the top right), but that should not be expected of authors.

Comment 1

[Emilio Cobos Álvarez [:emilio]]

Boris, I think you've looked at some other scrolling issues with V-T? Not sure if you have the cycles to poke.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

Attachment: Test-case from comment 0 (without the fix checkbox)

Comment 3

[Boris Chiou [:boris]]

(In reply to Emilio Cobos Álvarez [:emilio] from comment #1)

Boris, I think you've looked at some other scrolling issues with V-T? Not sure if you have the cycles to poke.

So we shouldn't let snapshot containing block be fixed positioned.

However, when we are scrolling, the grey area is always there (and it looks like ::view-transition or snapshot-containing block doesn't scroll). How do we achieve this without making snapshot containing block be fixed positioned?

Comment 4

[Emilio Cobos Álvarez [:emilio]]

Or we can account for that when computing the snapshot position perhaps?

Comment 5

[Bramus]

Found the spec issue (by accident): https://github.com/w3c/csswg-drafts/issues/10197