View Transitions using `.startViewTransition()` block all page interactivity while running because the `::view-transition` pseudo-element covers the entire viewport. Two CSS fixes address this: set `view-transition-name: none` on `:root` to remove the default full-page snapshot, and apply `pointer-events: none` to `::view-transition` so clicks pass through. A newer alternative is scoped view transitions — calling `startViewTransition()` on a specific parent element instead of `document` — which limits the pseudo-element tree to that element and avoids blocking interactivity outside it, though the CSS fix may still be needed within the scoped area.
Questions this post answers
Why can't I click elements on my page while a View Transition is running?
The `::view-transition` pseudo-element covers the entire viewport for the full duration of the transition, blocking all pointer events. This happens because `:root` has a `view-transition-name` by default, causing a full-page snapshot element to sit on the top layer. Setting `pointer-events: none` on `::view-transition` and `view-transition-name: none` on `:root` restores clickability outside the transitioning elements. Developers debugging View Transition quirks like this find the latest browser API gotchas on daily.dev.
How do I use scoped view transitions to avoid blocking interactivity on the rest of the page?
Call `startViewTransition()` on a specific parent element instead of `document` — e.g., `parent.startViewTransition(() => { ... })`. This keeps the pseudo-element tree scoped within that parent, so interactive elements outside it remain clickable without any CSS changes. Browser support is narrower than `document.startViewTransition()`, and you may still need `pointer-events: none` for interactivity inside the scoped area. Teams shipping polished transition UX track scoped view transition browser support on daily.dev.