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

jakearchibald has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-view-transitions-1] Positioning of ::view-transition (the root pseudo) ==
In https://github.com/w3c/csswg-drafts/issues/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.

<img alt="" src="https://raw.githubusercontent.com/w3c/csswg-drafts/2f8e60e1e2469852f9610c1a37158d65cef718c7/css-view-transitions-1/desktop-browser-snapshot-viewport.svg" width="500">

<img alt="" src="https://raw.githubusercontent.com/w3c/csswg-drafts/2f8e60e1e2469852f9610c1a37158d65cef718c7/css-view-transitions-1/phone-browser-snapshot-viewport.svg" width="200">

That means that `::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 the element 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. 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".

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8070 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 14 November 2022 16:45:52 UTC