Re: [csswg-drafts] [css-shared-element-transitions-1] when to update the pseudo element styles (#7812)

We had an offline discussion about this today, driven by ongoing implementation work. I'm adding a summary of the discussion and the updated proposal:

### Caching computed values for capture
When script invokes createTransition(), we wait until after ResizeObserver callbacks have been invoked (step 14) at the next update the rendering loop to execute the steps [here](https://drafts.csswg.org/css-view-transitions-1/#perform-an-outgoing-capture). This includes identifying elements which will participate in a transition (based on page-transition-tag and other constraints) and caching pixels + other state for them.

The above is by design since we want to cache the state above based on what will be displayed to the user in that frame. Since ResizeObserver callbacks synchronously execute script, mutations for them have to be reflected in the cached state.

### Constructing pseudo-DOM
Once the frame above has been presented, the updateDOM callback is invoked (asynchronously) and we wait for it to settle. The task which runs when the promise returned by updateDOM resolves synchronously identifies elements which will participate in a transition in the new DOM. This implies forcing clean style/layout outside of a frame (update the rendering loop) but is necessary here to construct the pseudo-DOM. After this the `ready` promise is resolved that developer can use to hook their customizations.

The tricky part here is that style on the pseudo-elements depends on style/layout of the corresponding DOM element. The spec text currently indicates that this is also updated only during update the rendering loop. So for example, the following code would result in an incorrect style value:

```js
document.createTransition(...).ready.then(() => {
  // Change the width of a tagged element.
  target.style.width = "100px";

  console.log(window.getComputedStyle(document.documentElement, "::page-transition-container(target)").style.width);
});
```

It's simpler to treat these pseudo-elements like any other element where from the developer's perspective, the style is always up to date once the `ready` promise resolves and they are accessible in script. The user agent does whatever computation it needs to do (lazily) to ensure that.

We need to sort out what this means for UA animations (#7813) which will also be impacted by DOM mutations above.

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


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

Received on Thursday, 13 October 2022 23:51:57 UTC