Graceful Fallback for Firefox and Older Browsers

The Two-Layer Fallback Strategy

The most robust fallback combines (1) feature detection so unsupported browsers skip the API entirely, and (2) a baseline CSS transition that animates the same property — so users on Firefox still see some animation.

function update() {
  document.body.classList.toggle('dark');
}

if (document.startViewTransition) {
  document.startViewTransition(update);
} else {
  update();
}

/* Baseline CSS transition — runs on all browsers */
body {
  transition: background-color 200ms ease, color 200ms ease;
}

/* Override with View Transitions when supported */
@supports (view-transition-name: none) {
  body {
    transition: none; /* avoid double-animation */
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 300ms;
  }
}

Why @supports works here

The @supports (view-transition-name: none) query is true only in browsers that have implemented the View Transitions API. By scoping the transition: none override inside it, you turn off the CSS fallback exactly when the View Transitions take over.

Detecting same-document vs cross-document support

const sameDoc = 'startViewTransition' in document;
const crossDoc = CSS.supports('selector(:active-view-transition)');

These two features shipped at different times — same-document in Chrome 111, cross-document in Chrome 126 — so detect them independently if your app uses both.

Firefox flag (early 2026)

Firefox supports View Transitions behind layout.css.view-transitions.enabled. You cannot enable this from your site, but you can document it for power users in your release notes.

Polyfills?

There is no polyfill for the View Transitions API because reproducing the snapshot mechanism in JavaScript would require canvas-based screenshotting that is too slow to be useful. The CSS transition fallback is the production-ready strategy.