> When using View Transitions you’ll notice the page becomes unresponsive to clicks while a View Transition is running. \[…\] This happens because of the `::view-transition` pseudo element – the one that contains all animated snapshots – gets overlayed on top of the document and captures all the clicks.

```
::view-transition /* 👈 Captures all 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 directly on the `:view-transition` allows us to click “under” the pseudo-element, meaning the full page is interactive even while the view transition is running.

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

I always, always, _always_ forget about `pointer-events`, so thanks to Bramus for posting this little snippet. I also appreciate the additional note about removing the `:root` element from participating in the view transition:

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

He quotes [the spec](https://drafts.csswg.org/css-view-transitions-1/#view-transition-stacking-layer) noting the reason why snapshots do not respond to hit-testing:

> Elements participating in a transition need to skip painting in their DOM location because their image is painted in the corresponding `::view-transition-new()` pseudo-element instead. Similarly, hit-testing is skipped because the element’s DOM location does not correspond to where its contents are rendered.

---

[Keeping the page interactive while a View Transition is running](https://css-tricks.com/keeping-the-page-interactive-while-a-view-transition-is-running/) originally published on [CSS-Tricks](https://css-tricks.com), which is part of the [DigitalOcean](https://try.digitalocean.com/css-tricks/?utm%5Fmedium=rss&utm%5Fsource=css-tricks.com&utm%5Fcampaign=family%5F&utm%5Fcontent=) family. You should [get the newsletter](https://css-tricks.com/newsletters/).