demo · v142

Concurrent Navigation Guard

The real reason this property landed: SPA routers fire navigations faster than transitions can finish. Without a guard, the second transition cancels the first mid-flight and the UI flickers. Chrome 142 exposes document.activeViewTransition so the router can check "is one already running?" before starting another. Below, the router uses the guard; mash the route buttons fast — the slow ones get skipped instead of stomping the in-flight one.

/

Welcome. Click a route fast. Without the guard the long transition stutters; with it, racing clicks are dropped.

activeViewTransition supported
—
currently transitioning
no

Try double-clicking a route button. The guard logs "skipped — already in flight" instead of starting a second concurrent transition.

guard pattern

function navigate(route) {
  if (document.activeViewTransition) {
    // Skip — let the in-flight one finish.
    return;
  }
  document.startViewTransition(() => render(route));
}

see also