Keeping The Page Interactive While A View Transition Is Running

When utilizing View Transitions you’ll discover the web page turns into unresponsive to clicks whereas a View Transition is operating. […] This occurs due to the ::view-transition pseudo ingredient – the one which incorporates all animated snapshots – will get overlayed on high of the doc and captures all of the clicks.

::view-transition /* 👈 Captures all of the clicks! */
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

The trick? It’s that sneaky little pointer-events property! Slapping it instantly on the :view-transition permits us to click on “beneath” the pseudo-element, that means the complete web page is interactive even whereas the view transition is operating.

::view-transition {
  pointer-events: none;
}

I all the time, all the time, all the time neglect about pointer-events, so due to Bramus for posting this little snippet. I additionally recognize the extra notice about eradicating the :root ingredient from collaborating within the view transition:

:root {
  view-transition-name: none;
}

He quotes the spec noting the rationale why snapshots don’t reply to hit-testing:

Components collaborating in a transition have to skip portray of their DOM location as a result of their picture is painted within the corresponding ::view-transition-new() pseudo-element as a substitute. Equally, hit-testing is skipped as a result of the ingredient’s DOM location doesn’t correspond to the place its contents are rendered.

Direct Link →