View Transitions Blocking Clicks? Here’s the Fix

During a View Transition, you may notice the page suddenly ignores clicks. This isn’t a bug — it’s the ::view-transition pseudo-element overlaying the entire document and intercepting all pointer input, as it contains every animated snapshot.

The solution is a single CSS property: pointer-events. Setting it to none on the :view-transition pseudo-element lets clicks pass “through” to the page below, keeping the UI fully interactive while the transition runs.

The tip comes from Bramus, who also highlights the importance of excluding the :root element from the transition when using this approach. He quotes the CSS spec, which explains that snapshots skip both painting and hit-testing at their DOM location, since their rendered image lives in the ::view-transition-new() pseudo-element instead.

  • Key takeaway: Add pointer-events: none to ::view-transition to restore page interactivity.
  • Caveat: Remove :root from the transition for the snippet to work as intended.