demo · v142

Positioned Container Suite

Three side-by-side modals, each with tab swaps that fire a view transition. Before Chrome 142 the snapshot was position: fixed on the viewport — so the transition for the centre modal slid in from the edge of the screen, not the modal. With position: absolute on the pseudo, the snapshot resolves against the modal's containing block, and the transition stays inside the modal.

modal in static parent

Tab A content of modal 1. Swap me to see the transition stay inside this box.

modal in transformed ancestor

Tab A inside a translated ancestor. The containing block is the modal itself.

modal in fixed ancestor

Tab A inside a fixed-positioned ancestor. Even this case stays inside.

relevant CSS

::view-transition {
  /* was: position: fixed — anchored to viewport, broke nested transitions */
  /* now: position: absolute — anchored to snapshot containing block */
  position: absolute;
}

see also