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

> Don't you have the same issue with the other alternative, as you'd need to manually specify the "inner" border radius yourself (even if we `overflow: clip`'d by default)?

By sizing the `::view-transition-nested-groups` pseudo to the padding-box, then at least the base use-case of “the wrapper has borders” would be covered.

When doing so, you’d get the following behavior out-of-the-box _(assuming that the `::view-transition-nested-groups` pseudo has `overflow: clip` applied, as part of the UA-generated style sheet)_:

https://github.com/user-attachments/assets/34ecda4d-30d2-486f-a11e-3b9f811cf9c8

_(Recording of [this demo](https://codepen.io/bramus/full/ogNZGyX) in Chrome Canary with flags, it includes a manual (and convoluted) workaround/fix for the border issue)_

The above seems like a better default behavior to ship.

---

It’s only when there are other things present that alter the shape of what gets rendered – such as a `border-radius` or a `corner-shape` – that authors need to replicate things that make sure the `::view-transition-nested-groups` also gets clipped in the same manner.

For `border-radius` we could easily generate this ourselves but for things like `corner-shape` I guess it would be more complicated. Admittedly this also taps a bit into _[“Layered Capture Mode”](https://github.com/WICG/view-transitions/blob/main/layered-capture-explainer.md)_, which turned out to be _very_ complicated – ask @noamr for details.

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


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

Received on Tuesday, 6 May 2025 12:37:28 UTC