[css-view-transitions-2]: Nested ::view-transition-group should have a container pseudo.

[vmpstr]

One of the common use cases for view-transition-group: contain that we're considering is a scroller with items within in and a view transition that shuffles the items within the container.

This is achieved with something like

.container {
  view-transition-name: clipper;
  view-transition-group: contain;
}
.container > .item {
  view-transition-name: auto;
}

In the current spec this builds the following pseudo tree:

:root
|-::view-transition
| |-::view-transition-group(clipper)
|   |-::view-transition-image-pair(clipper)
|   | |-::view-transition-old(clipper)
|   | |-::view-transition-new(clipper)
|   |-::view-transition-group(auto)
|   | |-::view-transition-image-pair(auto)
|   |   |-::view-transition-old(auto)
|   |   |-::view-transition-new(auto)
|   |-...

Essentially, ::view-transition-groups for the items are siblings of ::view-transition-image-pair(clipper)

Now, to achieve the desired effect we need to put a clip on ::view-transition-group(clipper). This works well in a limited number of cases. The problem happens once you have a border (with maybe a rounded clip) on the original clipper element. Because the ::view-transition-group(clipper) element is sized to be the border box of the original element, and the fact that border itself is baked into ::view-transition-{old/new}(clipper), we end up in a situation where it isn't trivial to properly clip the nested groups and also not clip the border. The solution is possible, but not ergonomic where one has to copy the border to the group pseudo, and do some sizing/offset magic to account for the fact that we're sized to the border box.

@bramus put together a demo here:
https://codepen.io/bramus/full/EaxvMXG/11b9fcbe8ebf42034110d3b486db037f

One improvement we can make is to introduce a new pseudo element ::view-transition-group-container (name tbd) that's sized to the padding box of the original element (I think that's the right clipping box or is it content box?) and hosts the nested groups:

:root
|-::view-transition
| |-::view-transition-group(clipper)
|   |-::view-transition-image-pair(clipper)
|   | |-::view-transition-old(clipper)
|   | |-::view-transition-new(clipper)
|   |-::view-transition-group-container(clipper)
|   | |-::view-transition-group(auto)
|   | | |-::view-transition-image-pair(auto)
|   | |   |-::view-transition-old(auto)
|   | |   |-::view-transition-new(auto)
|   | |-...

With that, adding a clip to ::view-transition-group-container(clipper) does not clip the captured box decorations of the original element, and there's less math required.

Cons:

• The clip won't be trivial with corner shape changes
• This clip won't clip other captured content from the original element that is not itself view transition named
• There are likely other issues, but @bramus's demo has an example of what this may look like and it seems a bit more ergonomic.

/cc @noamr @nt1m @bramus @jakearchibald

[bramus]

it isn't trivial to properly clip the nested groups and also not clip the border

To give people an idea of how not trivial this is with the current implementation in which the nested groups are direct children of the outer group: when using nested View Transitions that uses a border, you don’t want a nested snapshot to appear over the border.

You can see this problem in the “Nested View Transitions (::v-t-group in ::v-t-group)” section of the playground and also in the following screenshot:

To mitigate authors need to apply the border onto the ::view-transition-group(clipper) and then reposition all contained snapshots using the following CSS:

::view-transition-group(clipper) {
	/* Add the border + border-radius */
	border: var(--border-width) solid;
	border-radius: var(--border-radius);
	/* Make sure the width/height is not affected by adding the border */
	box-sizing: border-box;
	/* Clip the contents */
	overflow: clip;
}
::view-transition-new(clipper),
::view-transition-old(clipper) {
	/* Because the content-box of the ::view-transition-group(clipper) got adjusted, the snapshots need to be repositioned using a negative object-position */
	object-position: calc(var(--border-width) * -1) calc(var(--border-width) * -1);
	object-fit: none; 
}
::view-transition-group(.item) {
	/* Because the content-box of the ::view-transition-group(clipper) got adjusted, the nested elements need to be repositioned using a negative margin */
	margin: calc(var(--border-width) * -1) 0 0 calc(var(--border-width) * -1);
}

This approach is implemented in the “Nested View Transitions (::v-t-group in ::v-t-group) + Manual Fix” (with the hotpink border) section of the playground and can be see in this screenshot:

---

All this “reposition all the things” does not need to happen with a new ::view-transition-group-container pseudo. There are two approached to positioning this new pseudo within the ::view-transition-group(clipper):

1. Using an inset inside the ::view-transition-group(clipper)
2. Using a fake border on the ::view-transition-group-container(clipper)

With the first approach, the ::view-transition-group-container() would be positioned inside the ::view-transition-group(clipper) using an inset so that it takes up the content-box of the ::view-transition-group(clipper). These styles would be generated by the User Agent:

::view-transition-nested-content(clipper) {
	width: _(width of the content box the clipper)_;
	height: _(height of the content box the clipper)_;
	inset: _(insets of the content box against the border-box of the clipper)_;
}
::view-transition-nested-content(.album) {
	top: _(calculated against the content box of the clipper)_;
	left: _(calculated against the content box of the clipper)_;
}

As a result, the author only needs to write these styles anymore:

::view-transition-group-content(clipper) {
	border-radius: calc(var(--border-radius) - var(--border-width));
	overflow: clip;
}

The tricky thing for authors is that they need to compute the inner radius, which is equal to the outer-radius minus the border-size.

You can see this in action in the “Nested View Transitions, alt (::v-t-group in ::v-t-content)” (the one with the yellow border, right after the hotpink one) section of the playground.

_(The green lines on the screenshot align with the left and top edge of the `::view-transition-group-container()`)_

With the first approach, the ::view-transition-group-container() would be positioned inside the ::view-transition-group(clipper) like before, but it would be given a transparent border equal to the size of the border that was captured.

The UA generated styles would then look like this:

::view-transition-nested-content(clipper) {
	box-sizing: border-box; /* Required to make this work! */
	border: _border-size_ solid transparent;
}
::view-transition-nested-content(.album) {
	top: _(calculated against the content box of the clipper)_;
	left: _(calculated against the content box of the clipper)_;
}

This gives authors the benefit that they don’t need to calculate the inner radius for the ::view-transition-nested-content(clipper):

::view-transition-group-content(albums-wrapper) {
	border-radius: var(--border-radius);
	overflow: clip;
}

You can see this in action in the “Nested View Transitions, alt (::v-t-group in ::v-t-content) + fake transparent border” (the one with the yellow and green dotted border) section of the playground. For demonstration purposes the transparent border was given the color lime.

(The green lines on the screenshot align with the left and top edge of the ::view-transition-group-container())

---

This leads me to the following questions we should ask ourselves:

• Do we need the new pseudo?
• What to name the pseudo?
• Do we inset the new pseudo, or add a fake border?
  • Inset: Authors need to calc() the inner radius when they have one
  • Fake border: needs box-sizing: border-box (perhaps with !important in UA style sheet)?
• Should overflow: clip go in the UA stylesheet or not?

My personal opinion:

• Do we need the new pseudo? Yes!
• What to name the pseudo? My suggestion would be ::view-transition-nested-content. This aligns with ::details-content
• Do we inset the new pseudo, or add a fake border? I would prefer the inset approach. Calculating the inner radius isn’t exactly rocket science for authors to do. The fake border approach seems brittle (as one can overwrite the border and also the box-sizing – which could be made !important in the UA stylesheet) and also taps a lot into layered capturing.
• Should overflow: clip go in the UA stylesheet or not? I think so. If we don’t do this then by default nested contents would always overlap the border and also bleed out of the outer ::view-transition-group.

[noamr]

This demo seems like a really good use case for scoped view transitions rather than nested as the transition is constrained to one segment.

I would like to see how necessary this is for cases where it's true nesting rather than scoping, as in the element and its children participate in a root transition.

See also #11927