demo · v142

Tabbed Modal Inside a Positioned Ancestor

The real-world case that drove this CSS fix: tabbed UIs nested inside dialogs or popovers. Both the modal and the inner pane have position: relative ancestors, the pane has a view-transition-name. Pre-Chrome-142 the pseudo tree positioned itself against the viewport — so the transition slid the snapshot in from the wrong place, often clipping outside the modal entirely. With this change the pseudo tree positions absolutely against the snapshot containing block (the modal), and the pane slides cleanly between tabs.

Profile

Inside a positioned modal. Switching tabs runs a view transition. The pane's snapshot is positioned against the modal, not the viewport.

startViewTransition supported
—
last transition
—

Try switching tabs. Resize the window so the modal width changes; the snapshot still tracks the modal, not the viewport. Pre-Chrome 142 a wide window would show the snapshot sliding in from the page edge instead of the modal edge.

relevant CSS

.pane {
  view-transition-name: modal-pane;
}

/* Chrome 142+: snapshot containing block = nearest positioned ancestor */
/* Pre-142:    snapshot containing block = viewport */

see also