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

The CSS Working Group just discussed `when to update pseudo-element styles`, and agreed to the following:

* `RESOLVED: Synchronously generate styles for pseudo-DOM after DomUpdateCallback and before resolving ready promise.`
* `RESOLVED: Update the UA stylesheet as needed in a new step after the current step 14 of "update the rendering" (after RO callbacks are done)`

<details><summary>The full IRC log of that discussion</summary>
&lt;TabAtkins> Topic: when to update pseudo-element styles<br>
&lt;TabAtkins> github: https://github.com/w3c/csswg-drafts/issues/7812<br>
&lt;TabAtkins> khush: Need a precise timing for when to generate a UA stylesheet for these pseudos<br>
&lt;TabAtkins> khush: Complicated becuase their styles come from the actual DOM element<br>
&lt;TabAtkins> khush: The process is you call the function, we snapshot things, at the end of that frame we cache all the computed layout info<br>
&lt;TabAtkins> khush: Then when the author has finished with their dom-update callback, we do a sync style+layout to get the same computed layout again<br>
&lt;TabAtkins> khush: Then use that to generate a UA stylesheet, and resolve the promise<br>
&lt;TabAtkins> khush: Doing this before the promise is author has a hook to know what the styles look like before they do their own custom animations with WebAnim, for example<br>
&lt;TabAtkins> khush: So I've got three potential resolutions<br>
&lt;TabAtkins> khush: So first is, when the dev callback is done for DOM updating, is it ok to do a sync style+layout, generate a UA stylesheet, then resolve the promise?<br>
&lt;astearns> Proposed Resolution: Synchronously generate styles for pseudo-DOM after DomUpdateCallback and before resolving ready promise.<br>
&lt;TabAtkins> RESOLVED: Synchronously generate styles for pseudo-DOM after DomUpdateCallback and before resolving ready promise.<br>
&lt;astearns> Proposed Resolution: Generate styles for pseudo-DOM after step 14 of update the rendering of every frame after resolving ready promise.<br>
&lt;TabAtkins> khush: Second, your transition is happening, but author changes the destination element.<br>
&lt;TabAtkins> khush: The snapshot is *live*, so the snapshot size changes.<br>
&lt;TabAtkins> khush: If we don't reflect this in the pseudo it'll look bad<br>
&lt;TabAtkins> khush: So the second spot is where we say we update the UA stylesheet is step 14 in update the rendering, right after ResizeObserver callbacks are dispatched<br>
&lt;TabAtkins> khush: Only after that step do we know that all dev updates are done<br>
&lt;TabAtkins> TabAtkins: Can we just rely on the "implicit end property state" from animations?<br>
&lt;TabAtkins> khush: Too complex, need to adjust things like object-viewbox<br>
&lt;TabAtkins> TabAtkins: Makes sense<br>
&lt;fremy> thanks astearns<br>
&lt;TabAtkins> RESOLVED: Update the UA stylesheet as needed in a new step after the current step 14 of "update the rendering" (after RO callbacks are done)<br>
</details>


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


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

Received on Wednesday, 26 October 2022 17:03:42 UTC