How to Configure Strict CSS View-Transition-Old and New Object-Fit in Google Chrome

When implementing animations with the View Transition API in Chromium, one of the most common visual defects occurs when an element changes its aspect ratio between states. For example, when expanding a square thumbnail into a wide banner hero image or transitioning an inline avatar into a full-bleed modal, the browser captures two snapshot raster images of differing dimensions. By default, Chromium assigns object-fit: fill to ::view-transition-old and ::view-transition-new, which forcibly stretches the old and new image captures to fit the morphing container. This stretching results in distracting distortion of text, icons, and photograph subjects.

To preserve clean visual continuity, developers can override default pseudo-element properties with strict object-fit: cover or object-fit: contain rules combined with precise object-position alignments. Configuring these styles in Google Chrome ensures aspect ratio fidelity during complex view transitions.

Default Pseudo-Element Snapshot Mechanics

The View Transition API automatically generates a pseudo-element pair inside a common group container:

::view-transition-group(hero-image)
 └─ ::view-transition-image-pair(hero-image)
     ├─ ::view-transition-old(hero-image)
     └─ ::view-transition-new(hero-image)

Under default browser styling (from Chromium’s user-agent stylesheet):

::view-transition-old(*),
::view-transition-new(*) {
    position: absolute;
    inset-block-start: 0;
    inline-size: 100%;
    block-size: 100%;
    box-sizing: border-box;
}

Because the pseudo-elements render the captured raster snapshots like replaced <img> elements, an unconstrained transition between differing aspect ratios results in non-uniform scaling.

Enforcing Aspect Ratio Preservation with object-fit: cover

To prevent stretching when transitioning between different bounding boxes, configure object-fit and object-position directly on the pseudo-elements:

/* Scoped aspect ratio protection for thumbnail-to-hero morphing */
::view-transition-old(hero-media),
::view-transition-new(hero-media) {
    object-fit: cover;
    object-position: 50% 50%;
    height: 100%;
    width: 100%;
}

/* Ensure container group smoothly interpolates dimensions */
::view-transition-group(hero-media) {
    animation-duration: 400ms;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
    overflow: hidden;
    border-radius: inherit;
}

With object-fit: cover and overflow: hidden applied to the group, the snapshot images retain their authentic proportions throughout the animation, cropping smoothly rather than skewing or warping.

Handling Asymmetric Geometry Transitions

When transitioning from an asymmetrical thumbnail (such as a round avatar) to a rectangular profile modal, pair object-fit with clip-path interpolation:

::view-transition-group(user-avatar) {
    animation-duration: 350ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(user-avatar) {
    object-fit: cover;
    animation: 150ms ease-out both fade-out;
}

::view-transition-new(user-avatar) {
    object-fit: cover;
    animation: 350ms cubic-bezier(0.16, 1, 0.3, 1) both fade-in;
}

Inspecting Snapshot Renders in Chrome DevTools

To inspect snapshot rendering behavior in Google Chrome:

1. Open DevTools (F12) and bring up the Animations tab via Ctrl+Shift+P > Show Animations.
2. Trigger your navigation or component expansion state.
3. DevTools pauses the transition at its initial frame. Drag the scrubber to 50% completion.
4. Select the ::view-transition-old and ::view-transition-new elements in the Elements tree.
5. Inspect the Computed tab to confirm that object-fit: cover is actively applied and that no synthetic distortion is occurring on the rendered layers.

By strictly specifying object-fit on view transition pseudo-elements, you guarantee distortion-free animations across Google Chrome.