Re: [csswg-drafts] [css-view-transitions-1] content-visibility: auto elements are relevant to the user during a transition (#7874)

We had an offline discussion about this, summarized below. There are 2 different points to resolve for this issue:

1. If an element is participating in a transition, any element in its sub-tree (which has c-v: auto) should become relevant to the user. This makes sense given that the tagged element will be painted into a snapshot. This snapshot's position and scale is animated during the transition (by the pseudo-element its drawn in). So all its content (including the c-v: auto elements) could be in the viewport.

   Given that the snapshot for all non-root elements paints the entire DOM tree underneath, it'll make all c-v: auto elements underneath a non-root tagged element relevant to the user. It's only the root (for which the snapshot is clipped) which can have c-v: auto elements underneath that are clipped out of the snapshot and hence don't need to be made relevant to the user.

   **Proposed Resolution**: An element with `content-visibility: auto` is relevant to the user if it is painted into self or an ancestor's snapshot during a transition.

2. Deciding which elements participate in a transition requires resolving style on all DOM elements so the computed value of `page-transition-tag` property is known. This forces resolving at least style for elements with `c-v: auto`. That defeats the purpose of the optimization. There are 2 choices:

   - By default force style resolution on the whole DOM to find all tagged elements so `c-v: auto` doesn't influence whether a tag works. The developer will have no way to retain the optimization beyond temporarily adding `content-visibility: hidden` if they don't need tags under a DOM subtree to be discovered. We could add a `contain: view-transition` for the developer to directly express that intent.
   
   - Elements under a `c-v: auto` element which is not already relevant to the user can't participate in a transition. "Relevant to the user" can be different across browsers since [margin around viewport is user-agent defined](https://w3c.github.io/csswg-drafts/css-contain/#content-visibility:~:text=The%20element%20is%20%22on%2Dscreen%22%3A%20its%20paint%20containment%20box%27s%20overflow%20clip%20edge%20intersects%20with%20the%20viewport%2C%20or%20a%20user%2Dagent%20defined%20margin%20around%20the%20viewport.).  If the developer wants elements to always be discovered they can switch to `c-v: visible` for the transition.

   **Proposed Resolution**: When traversing the DOM to discover tagged elements only visit elements relevant to the user. Updates step 4 [here](https://drafts.csswg.org/css-view-transitions-1/#perform-an-outgoing-capture:~:text=associated%20document.-,For%20each%20element%20of%20every%20Element%20and%20pseudo%2Delement%20connected%20to%20document%2C%20in%20%5Bpaint%20order%5D(https%3A//drafts.csswg.org/css2/%23painting%2Dorder)%3A,-The%20link%20for) and [here](https://drafts.csswg.org/css-view-transitions-1/#ref-for-create-transition-pseudo-elements%E2%91%A0:~:text=new%20set.-,For%20each%20element%20of%20every%20Element%20and%20pseudo%2Delement%20connected%20to%20document%2C%20in%20%5Bpaint%20order%5D(https%3A//drafts.csswg.org/css2/%23painting%2Dorder),-%3A) changes to "For each element and pseudo-element connected to document and relevant to the user".

-- 
GitHub Notification of comment by khushalsagar
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7874#issuecomment-1282779769 using your GitHub account


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

Received on Tuesday, 18 October 2022 17:45:14 UTC