::view-transition position absolute

concepts

1. Absolute Transition

   Swap an absolutely-positioned tile inside a containing block — Chrome 142+ runs a smooth view transition because the pseudo tree resolves against the snapshot, not the viewport.

2. Tabbed Modal in Positioned Ancestor

   The real-world breakage: a tabbed pane inside a positioned modal. Pre-Chrome-142 the snapshot slid in from the viewport edge; with this fix it tracks the modal. Switch tabs and resize the window to see the difference.

3. Positioned Container Suite

   Three modals side-by-side: one in a static parent, one in a transformed ancestor, one in a fixed-positioned ancestor. Swap tabs in any of them — Chrome 142's snapshot tracks the actual containing block in every case. "Swap all three" fires them simultaneously to compare.

4. Floating Panel Animator

   Three draggable position: absolute floating panels (Notes, Chat, Calendar), each with a unique view-transition-name. Corner-snap buttons move panels inside document.startViewTransition(). A duration slider and easing picker let you tune the animation, and a "Before v142" toggle disables the transition to show the instant-jump baseline.

why it shipped

View Transition feature uses a pseudo sub-tree of the element, with ::view-transition being the root of that transition. Previously ::view-transition element was specified to have a position: fixed. CSSWG made a decision to make this instead position: absolute. In effect, this should not be noticeable since this element's containing block remains the snap

references

• ChromeStatus entry
• Spec