View transition API : overflow is ignored

I'm trying to discover the View Transition API (which seems so powerful!).

I think I get the whole picture, with view-transition-name, document.startViewTransition and so on. But I face a weird issue: when a transition occures on an item placed inside a container with a overflow CSS property, this overflow is ignored while the transition is running.
To be cleared: when a transition is running, all items normally hidden thanks to the overflow property are briefly visible. After the transition, they're hidden again.

Here is a small CodePen illustrating the issue.

I'm not sure if it's a browser issue (I have it with both Google Chrome and Microsoft Edge), or if I miss something on my code to avoid this strange behavior.

Any idea? :)

Thanks in advance!

It seems that it is not currently possible, but it is planned (see "Future work" > "Nested transition groups" section of https://github.com/WICG/view-transitions/blob/main/explainer.md#future-work).

Why is that?

Currently, when you transition items, a ::view-transition element is added to the root of your document.

To 'debug' it, slow down the transition by adding this to your example:

html::view-transition-group(*) {
  position: fixed;
  inset: 0;

  animation-duration: 60s;
  animation-fill-mode: both;
}

so you can easily inspect it in the dev tools as it animates.

Anyways, all your transitioned element snapshots (image-like of the previous state and 'real' one of the new state) are 'moved' to this root ::view-transition pseudo-element at the root of your page. As a result, they 'escape' your containers with overflow: hidden, and as a result, they can be fully visible during the transition.

According to https://github.com/WICG/view-transitions/blob/main/explainer.md#nested-transition-groups, in the future, you'll be able to opt in to create nested animation groups, and in this case, I can imagine you could create 'containers' that match your element with overflow hidden to nicely hide transitioned elements that are out of bounds.

Also, more context is described here: https://github.com/WICG/view-transitions/blob/main/nested-explainer.md.

P.S. It's sad.