Re: [csswg-drafts] [css-view-transitions-2] Optionally capture some properties (e.g. opacity/border) as style instead of snapshot (#10585)

The CSS Working Group just discussed `[css-view-transitions-2] Optionally capture some properties (e.g. opacity/border) as style instead of snapshot`, and agreed to the following:

* `RESOLVED: Change the capture mode for all view-transitions and specify how each property is affected by this capture mode change`
* `RESOLVED: Blink will experiment and come back with changes needed if there are compat concerns`

<details><summary>The full IRC log of that discussion</summary>
&lt;bramus> noamr: biggest issue we want to discuss today<br>
&lt;bramus> … how we capture and display nested componets<br>
&lt;bramus> … but also applies to non-nested vt elements<br>
&lt;bramus> … derived frm the nested conversation<br>
&lt;bramus> … when we nest groups, some css properties that were previously not that important to capture are now very important because otherwise it looks broken<br>
&lt;bramus> … two groups<br>
&lt;bramus> … - tree effects like opacity, mask, clip-path, filters, perspective<br>
&lt;bramus> … these apply to entire tree<br>
&lt;bramus> … - borders and border-radius because once you have a hierarchy of groups and you have overflow then the overflow affects the origin where you draw the borders and shadows<br>
&lt;bramus> … these also paint after backgrounds<br>
&lt;bramus> … so it comes down to when doing just default capture, nesting is visually broken<br>
&lt;bramus> … but this also was something we discussed when vt started<br>
&lt;bramus> … that animating ?? directly looks better, e.g border and border-radius<br>
&lt;bramus> … than just capturing it as one image and cross-fading it<br>
&lt;bramus> … otoh we already shipped the old thing, so its a compatibility issue<br>
&lt;bramus> … we see three options<br>
&lt;bramus> … 1. change everything by default and dont just capture snapshot but add more things that get captured as ?? instead of a flat snapshot (opacity, filter, transform, bg borders, )<br>
&lt;bramus> … will change things because these styles are part of the group<br>
&lt;bramus> … but have changed things before (but this is different as it changes observable computed style)<br>
&lt;bramus> … 2. add new property `v-t-style` or `v-t-capture-mode`<br>
&lt;bramus> … fane of the first as it reminds me of `transform-style`<br>
&lt;bramus> … 3. to have this new property but give it auto value<br>
&lt;bramus> … if group contains other groups when you get the new mode<br>
&lt;bramus> … so users using nesting get the new mode<br>
&lt;bramus> … but can have a property to change the behavior<br>
&lt;khush> q?<br>
&lt;khush> q+<br>
&lt;astearns> q+<br>
&lt;bramus> … if people want the old crossfade behavior theycan always do so by regular DOM nesting<br>
&lt;astearns> ack khush<br>
&lt;bramus> khush: hoping we can split this in 2 resolutions<br>
&lt;bramus> … 1 on the new capture mode<br>
&lt;bramus> … and 2 to change the default or not<br>
&lt;bramus> q+<br>
&lt;bramus> astearns: confused about third option (adding current capture for non-nested but auto new nested for grouping without giving opt out)<br>
&lt;bramus> noamr: there is an opt out<br>
&lt;bramus> astearns: not entirely sure about backwards compat concern since we ar estill working on this<br>
&lt;bramus> … i’d have to have somebody look at the data<br>
&lt;bramus> … changing mode for non-grouped things seems OK if its better<br>
&lt;astearns> ack astearns<br>
&lt;astearns> ack bramus<br>
&lt;flackr> +1<br>
&lt;fantasai> scribe+<br>
&lt;fantasai> bramus: Yes, this would be breaking, but it would break in a good way<br>
&lt;fantasai> bramus: Regarding the name of the property, one of the values proposed is cross-fade, which is a value I wouldn't recommend<br>
&lt;fantasai> bramus: because authors can change the animation, e.g. to scale-up/scale-down, etc.<br>
&lt;noamr> q+<br>
&lt;fantasai> bramus: I would suggest a different name for the property, view-transition-capture-mode: flat | layered<br>
&lt;astearns> ack noamr<br>
&lt;bramus> noamr: fine with any type of bikeshedding<br>
&lt;bramus> … if we choose option 1 we dont need new property<br>
&lt;bramus> astearns: yet<br>
&lt;bramus> noamr: propably wouldnt need one<br>
&lt;bramus> … if we change default then optoin of using crossfade is always possible with nesting DOM<br>
&lt;khush> q+<br>
&lt;bramus> … defers the conversation about naming it<br>
&lt;astearns> ack khush<br>
&lt;bramus> khush: my vote is for option 1, is risky but can try it with a flag<br>
&lt;ntim> q+<br>
&lt;bramus> … one instance i have seen where it could break things, and partner let us know that they would welcome the change<br>
&lt;astearns> ack ntim<br>
&lt;bramus> ntim: is this changing by default for all capture modes or just nested ones?<br>
&lt;bramus> … i mean, nested or everything?<br>
&lt;bramus> noamr: option 1 is everything, option 3 only for groups<br>
&lt;bramus> … option 1 would be “breaking change” / modification to view transitions 1<br>
&lt;bramus> astearns: and option 3 would not be<br>
&lt;bramus> noamr: i proposed that one as i am very skiddish about backwards compat<br>
&lt;vmpstr> q+<br>
&lt;bramus> vmpstr: also supportive of option 1<br>
&lt;bramus> … future looking this mode seems to be strictly better in a lot of cases (e.g. border radius that animate instead of cross-fade)<br>
&lt;bramus> … one concern is breakages and specifically if Apple is also on board with making this change then we want to do this<br>
&lt;bramus> … want to avoid interop problem where blink switches modes and webkit doesnt<br>
&lt;bramus> … hard to feature detect<br>
&lt;bramus> … and sites would have to deal with two different modes<br>
&lt;bramus> … that is the biggest risk I see<br>
&lt;bramus> astearns: tim, do you have preference?<br>
&lt;bramus> ntim: dont know how fast if we can adopt this<br>
&lt;bramus> … guess if there is a compat concern it maybe is possible?<br>
&lt;bramus> … cant give definitive answer<br>
&lt;bramus> fantasai: we can reasonable say that if this is the direction to go we should … but cant commit to a timescale though<br>
&lt;bramus> noamr: there is some sentiment to 1 but I feel ppl need to think about this more?<br>
&lt;bramus> astearns: could resolve on option 1 and have blink try it out to see how much breakage there is<br>
&lt;bramus> … and if its manageable then we’re good and come back to this<br>
&lt;bramus> … would be resolving one 1 unless it’s not possible<br>
&lt;bramus> … i’d rather not define a new capture mode without a switch<br>
&lt;khush> q+<br>
&lt;vmpstr> q-<br>
&lt;bramus> ntim: do you know how much work this will be for you?<br>
&lt;bramus> noamr: I am prototyping it right now, can report back<br>
&lt;bramus> … doesnt seem like huge amount of work<br>
&lt;bramus> … mainly adding more things to list of captured props and not painting them when element is being captured<br>
&lt;bramus> ntim: OK<br>
&lt;astearns> ac khush<br>
&lt;astearns> ack khush<br>
&lt;bramus> khush: when we prototype we]ll find edge cases<br>
&lt;bramus> … we will take those back to the WG in that case<br>
&lt;bramus> … want to get this right<br>
&lt;bramus> noamr: it involves a lot of CSS props<br>
&lt;bramus> … some of them are captured and not painted, while others are painted<br>
&lt;flackr> q+<br>
&lt;bramus> … the ones specifically would all be specified<br>
&lt;astearns> ack flackr<br>
&lt;bramus> flackr: is it that we need a specific property list or is it that your children are captured as a painting and only props that affect the child dont matter instead of the box that is captured?<br>
&lt;bramus> noamr: depends on how handwavey we want to be<br>
&lt;bramus> … we would need WPTs<br>
&lt;bramus> flackr: just want to avoid situation where it is hard to guess<br>
&lt;vmpstr> q+<br>
&lt;bramus> noamr: there could be general wording plus exceptions<br>
&lt;bramus> astearns: as goes for specifying it should be about its characteristics so that it extends to new future properties<br>
&lt;astearns> ack vmpstr<br>
&lt;bramus> noamr: agreed<br>
&lt;bramus> vmpstr: agree as well<br>
&lt;bramus> … dont want to maintain a list of props for all eternity<br>
&lt;bramus> noamr: could we add it to a property descriptor?<br>
&lt;ntim> q+<br>
&lt;bramus> astearns: we have a lot of things in description tables … if we can avoid addig a field there I would prefer that<br>
&lt;astearns> ack ntim<br>
&lt;bramus> noamr: no strong opinion<br>
&lt;khush> q+<br>
&lt;bramus> ntim: from impl POV it would be good to have list well defined in some way. new field in prop table or whatever workds<br>
&lt;bramus> … to make sure impls dont miss things<br>
&lt;bramus> astearns: for most part weshould be able to define groups of props with some exceptions and then encode things in WPTs<br>
&lt;bramus> … having a list of props in the WPT seems better than in the spec<br>
&lt;astearns> ack khush<br>
&lt;bramus> khush: gonna second what ntim said<br>
&lt;vmpstr> q+<br>
&lt;bramus> … right now spec has UA stylesheet that is very well defined so there is no interop issue there<br>
&lt;bramus> … when having a property descriptor in the prop table makes it easier for interop too<br>
&lt;bramus> … e.g. animatable<br>
&lt;astearns> ack vmpstr<br>
&lt;bramus> … you dont miss it<br>
&lt;ntim> I'm also OK with the list being maintained into a WPT, it just needs to be maintained somewhere<br>
&lt;noamr> q+<br>
&lt;bramus> vmpstr: middle ground could be to define groups of props such as “clipping properties”<br>
&lt;bramus> … and props should add themselves to those groups<br>
&lt;astearns> ack noamr<br>
&lt;bramus> … that might be a nice middle ground, but that’s only a guess right now<br>
&lt;bramus> noamr: can have a default per spec<br>
&lt;bramus> … eg box shadow spec to include sth that says all the props work in one way or the other<br>
&lt;bramus> astearns: elika, do you have an idea?<br>
&lt;bramus> fantasai: like the idea of doing it per spec. will simplify thinking about it<br>
&lt;fantasai> https://www.w3.org/TR/css-backgrounds-3/#placement<br>
&lt;bramus> … other option to put it in propdef table<br>
&lt;bramus> … we current have a ?? so we could have a statement in one of those sections<br>
&lt;astearns> s/??/module interaction sections/<br>
&lt;bramus> s/??/some boilerplate text in module interactions<br>
&lt;bramus> … how x interacts with other modules<br>
&lt;bramus> … or “this also applies to first letter”<br>
&lt;bramus> … can add another paragraph for VTs<br>
&lt;bramus> astearns: how about we specify this in VTs with an explicit list to begin with and a note saying that this info needs to move to individual modules and module interaction section?<br>
&lt;bramus> fantasai: and if vt editors want to work on some PRs to update specs that need that section, that would be welcome in a single PR<br>
&lt;bramus> noamr: OK<br>
&lt;khush> q+<br>
&lt;bramus> fantasai: some specs are missind that section though, so youll need to add it<br>
&lt;bramus> khush: so is the conclusion we have an explicit list but it is define by each module?<br>
&lt;bramus> … it describes which group it belongs to, and then vt handles the group behvior<br>
&lt;astearns> ack khush<br>
&lt;khush> +1<br>
&lt;vmpstr> +1<br>
&lt;bramus> fantasai: yes, but at first you can have an explicity list in the vt spec and then later on group them<br>
&lt;fantasai> once you feel confident in your groupings/descriptions<br>
&lt;bramus> astearns: so propsed resolution is to change capture mode for all view-transitions and specify how each property is affected by this capture mode change<br>
&lt;bramus> … does that sound right?<br>
&lt;bramus> … astearns any concerns?<br>
&lt;bramus> bramus: should we also add that blink will experiemnt and come back with compat concerns?<br>
&lt;bramus> astearns: sounds good<br>
&lt;bramus> RESOLVED: Change the capture mode for all view-transitions and specify how each property is affected by this capture mode change<br>
&lt;bramus> RESOLVED: Blink will experiment and come back with changes needed if there are compat concerns<br>
</details>


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


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

Received on Wednesday, 21 August 2024 15:55:43 UTC