Re: [csswg-drafts] [css-view-transitions-2]: Nested ::view-transition-group should have a container pseudo. (#11926)

> 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](https://codepen.io/bramus/full/EaxvMXG/11b9fcbe8ebf42034110d3b486db037f) and also in the following screenshot:

<img width="944" alt="Image" src="https://github.com/user-attachments/assets/364ddc73-4bbe-4e52-944e-e3912bfdee3b" />

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

```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](https://codepen.io/bramus/full/EaxvMXG/11b9fcbe8ebf42034110d3b486db037f) and can be see in this screenshot:

<img width="948" alt="Image" src="https://github.com/user-attachments/assets/0f78fa4e-405c-4a9a-bb94-c74891c98751" />

---

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:

```css
::view-transition-nested-content(clipper) {
 width: calc(width - _border-widths_);
 height: calc(height - _border-heights_);
 inset: _border-sizes_;
}
::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:

```css
::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](https://codepen.io/bramus/full/EaxvMXG/11b9fcbe8ebf42034110d3b486db037f).

<img width="945" alt="Image" src="https://github.com/user-attachments/assets/d05b298f-c3f7-4da1-b317-e5c9029e1de1" />
_(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:

```css
::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)`:

```css
::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](https://codepen.io/bramus/full/EaxvMXG/11b9fcbe8ebf42034110d3b486db037f). For demonstration purposes the transparent border was given the color `lime`.

<img width="951" alt="Image" src="https://github.com/user-attachments/assets/747a3945-9d49-4551-a7f0-982e90f5dd3d" />

_(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. 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)
- _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`.

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


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

Received on Wednesday, 12 March 2025 18:38:49 UTC