[css-view-transitions-1] Positioning of ::view-transition (the root pseudo) #8070

jakearchibald · 2022-11-14T16:45:48Z

In #7859 we resolved on the concept of a "snapshot viewport", which would be consistent regardless of things like URL bar, virtual keyboard, and scrollbars, meaning animations would be stable, even if those things only existed on one side of the transition.

This means ::view-transition would fill this snapshot viewport throughout the transition.

We see two options to achieve this:

Option 1: Position `::view-transition` per frame

::view-transition would use regular position: fixed positioning. inset: 0 would only fill the layout viewport, which is often smaller than the snaphshot viewport. So, to fix this, negative inset values would be used to make ::view-transition fill the snapshot viewport. These values would be updated per frame, to ensure the positioning is correct during any state changes (eg url bar hiding/showing).

This would be developer-visible via getComputedStyle, and would behave differently if the position was set to a non-fixed value.

In browsers that use a compositor to manage position: fixed items, there's a worry that there may be rendering instability in frames where the compositor is 'ahead' of the main thread's updates to the inset.

Option 2: Layout `::view-transition` within the "snapshot viewport"

The ::view-transition would have position: fixed; inset: 0. However, we would use spec prose to say this pseudo is laid out in the snapshot viewport, so position: fixed; inset: 0 would cause ::view-transition to fill the snapshot viewport, rather than the layout viewport.

This wouldn't have the compositor issues, as it isn't dependent on main thread style updates. However, it's perhaps a bit weird for this one pseudo to appear to treat layout differently. Is there anything else that does something similar?

We're leaning towards "option 2".

The text was updated successfully, but these errors were encountered:

bokand · 2022-11-23T20:11:46Z

Assuming we go with option 2, a related issue is what happens if author style does something else, e.g. position: absolute. Should that work and what does it mean? Is it possible to say author style cannot affect the position of this element? Or else, can we spec that this lives in its own formatting context with absolute & fixed containing blocks being the "snapshot viewport"?

jakearchibald · 2022-11-23T21:40:46Z

Or else, can we spec that this lives in its own formatting context with absolute & fixed containing blocks being the "snapshot viewport"?

That's my preference.

khushalsagar · 2022-11-24T09:22:11Z

+1 to author style can not change the computed position of ::view-transition.

jakearchibald · 2022-11-24T11:24:39Z

Isn't it better to just say the snapshot viewport is ::view-transition's containing block? Then, even if the position value is changed, it's still laid out in the snapshot viewport.

khushalsagar · 2022-11-24T15:13:39Z

Fair. So ::view-transition's containing block is the snapshot viewport which has no ancestor containing block. No matter what its position value is, the containing block remains the same.

astearns · 2022-12-15T23:45:38Z

Since this change has consensus here and will get wider review once we commit the change, we likely do not need to spend meeting time on it.

The CSSWG will automatically accept this resolution one week from now if no objections are raised here. Anyone can add an emoji to this comment to express support. If you do not support this resolution, please add a new comment.

Proposed Resolution: ::view-transition's containing block is the snapshot viewport

astearns · 2022-12-23T19:57:30Z

RESOLVED: ::view-transition's containing block is the snapshot viewport

khushalsagar · 2023-01-12T16:05:04Z

Edits landed in #8126.

The ::view-transition is positioned behind viewport-insetting UI such as the mobile URL bar, RTL/left-side vertical scrollbars, and virtual keyboards. The ::view-transition needs to have its size and position set to match the "snapshot root rect"[0]. Currently this is achieved by directly setting the size and location on the ::view-transition's style in the UA stylesheet. However, this comes with several drawbacks: * Requires the main thread to perform an update to change the position. The mobile URL bar can animate in on the compositor thread without a Blink update. * Makes it difficult for authors to style ::view-transition themselves. E.g. to shift the transition they'd have to use getComputedStyle and add their own value, which could be overwritten by the UA. * Is visible to authors via getComputedStyle which could complicate making changes in this area in the future. w3c/csswg-drafts#8070 resolved and specified that the containing block of `::view-transition` should be the snapshot root rect. This CL removes replaces the styles on ::view-transition with `position:fixed; inset: 0` and special cases the containing block for the ::view-transition pseudo element to match the geometry of the snapshot root rect. [0] https://chromium.googlesource.com/chromium/src/+/main/third_party/blink/renderer/core/view_transition/README.md#viewport-sizes Bug: 1383980 Change-Id: Ie05de201dd3775717d4e231d08299471d68a2de4

The ::view-transition is positioned behind viewport-insetting UI such as the mobile URL bar, RTL/left-side vertical scrollbars, and virtual keyboards. The ::view-transition needs to have its size and position set to match the "snapshot root rect"[0]. Currently this is achieved by directly setting the size and location on the ::view-transition's style in the UA stylesheet. However, this comes with several drawbacks: * Requires the main thread to perform an update to change the position. The mobile URL bar can animate in on the compositor thread without a Blink update. * Makes it difficult for authors to style ::view-transition themselves. E.g. to shift the transition they'd have to use getComputedStyle and add their own value, which could be overwritten by the UA. * Is visible to authors via getComputedStyle which could complicate making changes in this area in the future. w3c/csswg-drafts#8070 resolved and specified that the containing block of `::view-transition` should be the snapshot root rect. This CL removes replaces the styles on ::view-transition with `position:fixed; inset: 0` and special cases the containing block for the ::view-transition pseudo element to match the geometry of the snapshot root rect. [0] https://chromium.googlesource.com/chromium/src/+/main/third_party/blink/renderer/core/view_transition/README.md#viewport-sizes Bug: 1383980 Change-Id: Ie05de201dd3775717d4e231d08299471d68a2de4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4166263 Reviewed-by: Vladimir Levin <vmpstr@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: David Bokan <bokan@chromium.org> Reviewed-by: Khushal Sagar <khushalsagar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1096264}

…r ::view-transition, a=testonly Automatic update from web-platform-tests vt: Snapshot rect is containing block for ::view-transition The ::view-transition is positioned behind viewport-insetting UI such as the mobile URL bar, RTL/left-side vertical scrollbars, and virtual keyboards. The ::view-transition needs to have its size and position set to match the "snapshot root rect"[0]. Currently this is achieved by directly setting the size and location on the ::view-transition's style in the UA stylesheet. However, this comes with several drawbacks: * Requires the main thread to perform an update to change the position. The mobile URL bar can animate in on the compositor thread without a Blink update. * Makes it difficult for authors to style ::view-transition themselves. E.g. to shift the transition they'd have to use getComputedStyle and add their own value, which could be overwritten by the UA. * Is visible to authors via getComputedStyle which could complicate making changes in this area in the future. w3c/csswg-drafts#8070 resolved and specified that the containing block of `::view-transition` should be the snapshot root rect. This CL removes replaces the styles on ::view-transition with `position:fixed; inset: 0` and special cases the containing block for the ::view-transition pseudo element to match the geometry of the snapshot root rect. [0] https://chromium.googlesource.com/chromium/src/+/main/third_party/blink/renderer/core/view_transition/README.md#viewport-sizes Bug: 1383980 Change-Id: Ie05de201dd3775717d4e231d08299471d68a2de4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4166263 Reviewed-by: Vladimir Levin <vmpstr@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: David Bokan <bokan@chromium.org> Reviewed-by: Khushal Sagar <khushalsagar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1096264} -- wpt-commits: aed10a113c9fc16605ea2ba2df218e6f3dec3f54 wpt-pr: 38131

The ::view-transition is positioned behind viewport-insetting UI such as the mobile URL bar, RTL/left-side vertical scrollbars, and virtual keyboards. The ::view-transition needs to have its size and position set to match the "snapshot root rect"[0]. Currently this is achieved by directly setting the size and location on the ::view-transition's style in the UA stylesheet. However, this comes with several drawbacks: * Requires the main thread to perform an update to change the position. The mobile URL bar can animate in on the compositor thread without a Blink update. * Makes it difficult for authors to style ::view-transition themselves. E.g. to shift the transition they'd have to use getComputedStyle and add their own value, which could be overwritten by the UA. * Is visible to authors via getComputedStyle which could complicate making changes in this area in the future. w3c/csswg-drafts#8070 resolved and specified that the containing block of `::view-transition` should be the snapshot root rect. This CL removes replaces the styles on ::view-transition with `position:fixed; inset: 0` and special cases the containing block for the ::view-transition pseudo element to match the geometry of the snapshot root rect. [0] https://chromium.googlesource.com/chromium/src/+/main/third_party/blink/renderer/core/view_transition/README.md#viewport-sizes Bug: 1383980 Change-Id: Ie05de201dd3775717d4e231d08299471d68a2de4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4166263 Reviewed-by: Vladimir Levin <vmpstr@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: David Bokan <bokan@chromium.org> Reviewed-by: Khushal Sagar <khushalsagar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1096264}

…r ::view-transition, a=testonly Automatic update from web-platform-tests vt: Snapshot rect is containing block for ::view-transition The ::view-transition is positioned behind viewport-insetting UI such as the mobile URL bar, RTL/left-side vertical scrollbars, and virtual keyboards. The ::view-transition needs to have its size and position set to match the "snapshot root rect"[0]. Currently this is achieved by directly setting the size and location on the ::view-transition's style in the UA stylesheet. However, this comes with several drawbacks: * Requires the main thread to perform an update to change the position. The mobile URL bar can animate in on the compositor thread without a Blink update. * Makes it difficult for authors to style ::view-transition themselves. E.g. to shift the transition they'd have to use getComputedStyle and add their own value, which could be overwritten by the UA. * Is visible to authors via getComputedStyle which could complicate making changes in this area in the future. w3c/csswg-drafts#8070 resolved and specified that the containing block of `::view-transition` should be the snapshot root rect. This CL removes replaces the styles on ::view-transition with `position:fixed; inset: 0` and special cases the containing block for the ::view-transition pseudo element to match the geometry of the snapshot root rect. [0] https://chromium.googlesource.com/chromium/src/+/main/third_party/blink/renderer/core/view_transition/README.md#viewport-sizes Bug: 1383980 Change-Id: Ie05de201dd3775717d4e231d08299471d68a2de4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4166263 Reviewed-by: Vladimir Levin <vmpstr@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: David Bokan <bokan@chromium.org> Reviewed-by: Khushal Sagar <khushalsagar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1096264} -- wpt-commits: aed10a113c9fc16605ea2ba2df218e6f3dec3f54 wpt-pr: 38131

jakearchibald added Agenda+ css-view-transitions-1 View Transitions; Bugs only labels Nov 14, 2022

jakearchibald mentioned this issue Nov 16, 2022

[css-view-transitions-1] Add snapshot viewport concept #8037

Merged

astearns added Async Resolution: Proposed Candidate for auto-resolve with stated time limit and removed Agenda+ labels Dec 15, 2022

astearns added Needs Edits and removed Async Resolution: Proposed Candidate for auto-resolve with stated time limit labels Dec 23, 2022

mozilla-apprentice mentioned this issue Dec 23, 2022

[css-view-transitions-1] Positioning of ::view-transition (the root pseudo) mozilla/wg-decisions#991

Open

khushalsagar closed this as completed Jan 12, 2023

bokand mentioned this issue Jan 18, 2023

[css-view-transitions-1] Replace 'snapshot viewport' with 'snapshot root' #8324

Merged

chromium-wpt-export-bot mentioned this issue Jan 23, 2023

vt: Snapshot rect is containing block for ::view-transition web-platform-tests/wpt#38131

Merged

fantasai added Closed Accepted by CSSWG Resolution and removed Needs Edits labels Dec 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-view-transitions-1] Positioning of ::view-transition (the root pseudo) #8070

[css-view-transitions-1] Positioning of ::view-transition (the root pseudo) #8070

jakearchibald commented Nov 14, 2022 •

edited

Loading

bokand commented Nov 23, 2022

jakearchibald commented Nov 23, 2022

khushalsagar commented Nov 24, 2022

jakearchibald commented Nov 24, 2022

khushalsagar commented Nov 24, 2022

astearns commented Dec 15, 2022

astearns commented Dec 23, 2022

khushalsagar commented Jan 12, 2023

[css-view-transitions-1] Positioning of ::view-transition (the root pseudo) #8070

[css-view-transitions-1] Positioning of ::view-transition (the root pseudo) #8070

Comments

jakearchibald commented Nov 14, 2022 • edited Loading

Option 1: Position ::view-transition per frame

Option 2: Layout ::view-transition within the "snapshot viewport"

bokand commented Nov 23, 2022

jakearchibald commented Nov 23, 2022

khushalsagar commented Nov 24, 2022

jakearchibald commented Nov 24, 2022

khushalsagar commented Nov 24, 2022

astearns commented Dec 15, 2022

astearns commented Dec 23, 2022

khushalsagar commented Jan 12, 2023

jakearchibald commented Nov 14, 2022 •

edited

Loading

Option 1: Position `::view-transition` per frame

Option 2: Layout `::view-transition` within the "snapshot viewport"