Re: [csswg-drafts] [css-view-transitions-1] Handling mix-blend-mode on elements captured for a transition (#8962)

The CSS Working Group just discussed `[css-view-transitions-1] Handling mix-blend-mode on elements captured for a transition`, and agreed to the following:

* `RESOLVED: Add mix-blend-mode to list of properties copied from the element to the group pseudo`

<details><summary>The full IRC log of that discussion</summary>
&lt;TabAtkins> khush: when we're doing any kind of animation, we try to bake as many things as possible into the snapshot itself<br>
&lt;TabAtkins> khush: but some just can't be done, like mix-blend-mode<br>
&lt;TabAtkins> khush: Right now it just gets dropped on the floor<br>
&lt;TabAtkins> khush: so if you want the pseudo-dom to reflect the real dom's rednering, the best way to handle m-b-m is to copy it over to group pseudo<br>
&lt;TabAtkins> khush: And more generally, for other properties that can't be baked into the snapshot, we propose to copy them over to the group pseudo<br>
&lt;TabAtkins> noamr: if it's copied to the group, what happens if the two states have different m-b-m<br>
&lt;TabAtkins> khush: it doesnt interpolate so it'll flip immediately to the new value<br>
&lt;TabAtkins> emilio: Do we have a list of which properties are meant to be baked into the iamge than the group?<br>
&lt;TabAtkins> noamr: it's in the spec<br>
&lt;TabAtkins> khush: opacity/filter/etc are baked into the snapshot, and the list of copied properties are very epxlicit<br>
&lt;TabAtkins> khush: There's a "capture these proeprties" step in the algo<br>
&lt;TabAtkins> khush: So if there are more properties to be copied we'll bring those in another issue<br>
&lt;TabAtkins> emilio: it feels a little weird to special-case some props vs others, but yeah<br>
&lt;TabAtkins> astearns: Do we run the risk of ahving this list continue to be expanded?<br>
&lt;TabAtkins> SebastianZ: maybe we have to put these special properties in some defined group<br>
&lt;TabAtkins> SebastianZ: I saw some more properties that are on the snapshot, like clip-path. ARe mask in that group?<br>
&lt;TabAtkins> khush: All of those are baked into the snapshot itself<br>
&lt;khush> https://drafts.csswg.org/css-view-transitions-1/#captured-elements<br>
&lt;TabAtkins> khush: The set of properties that are copied as properties is in the spec here...<br>
&lt;TabAtkins> vmpstr: basically what we copy are things that interact with other content, not just the subtree<br>
&lt;TabAtkins> vmpstr: So opacity/clip-path only affect the element, but mix-blend-mode interacts with something else and we can't capture that statically<br>
&lt;TabAtkins> vmpstr: I was thinking backdrop-filter might be one of those props, but i'm not sure how it works<br>
&lt;fantasai> TabAtkins: backdrop-filter lives in a similar space to mix-blend-mode<br>
&lt;TabAtkins> vmpstr: i just dont know if the topology is important for the tree<br>
&lt;TabAtkins> vmpstr: The element bieng affected is in a pseudo-element that is a pseudo-child of the root...<br>
&lt;astearns> q?<br>
&lt;TabAtkins> khush: It does matter<br>
&lt;TabAtkins> khush: There's a feature extension of VT that will let you not lift the VT pseudo up to the root<br>
&lt;TabAtkins> khush: So that'll be necessary to get backdrop-filter to work correctly<br>
&lt;TabAtkins> astearns: I think some prose explaining why this list exists would be good in the spec<br>
&lt;TabAtkins> khush: good idea, i'll add a note with motivation<br>
&lt;TabAtkins> emilio: are the snapshots we take semi-transparent? or do we composite with the background<br>
&lt;fantasai> s/in the spec/in the spec, that these are not effects that can be captured in the snapshot/<br>
&lt;TabAtkins> khush: The base can be semi-transparent<br>
&lt;fantasai> ACTION: khush to add a note about the motivation for the copied properties<br>
&lt;TabAtkins> khush: it's composited just as part of being rendered in the pseudo<br>
&lt;TabAtkins> vmpstr: the v-t-name causes a stackign context<br>
&lt;fantasai> TabAtkins: I think the conclusion is that while backdrop-filter is in the right spot for this, it's not usable with VT atm<br>
&lt;TabAtkins> emilio: So that means mix-blend-mode works okay so that's fine<br>
&lt;TabAtkins> emilio: Stil seems weird to special-case some properties, but better than dropping it on the floor<br>
&lt;TabAtkins> astearns: so proposed res is to add mix-blend-mode to the list of properties<br>
&lt;TabAtkins> SebastianZ: and opacity/clip-path/mask?<br>
&lt;fantasai> [various other properties mentioned are baked into the snapshot]<br>
&lt;TabAtkins> astearns: They're already cpatured in the snapshot<br>
&lt;TabAtkins> RESOLVED: Add mix-blend-mode to list of properties copied from the element to the group pseudo<br>
&lt;TabAtkins> astearns: The list is a little weird but we do need to have this behavior captured<br>
&lt;TabAtkins> astearns: and as people use VT and notice things being dropped form the snapshot, people should have an idea of where to fix it, so the note will be good<br>
</details>


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


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

Received on Tuesday, 18 July 2023 16:04:01 UTC