This content originally appeared on CSS-Tricks and was authored by Geoff Graham
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-transitionpseudo 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 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 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
This content originally appeared on CSS-Tricks and was authored by Geoff Graham
Geoff Graham | Sciencx (2025-01-31T14:11:00+00:00) Keeping the page interactive while a View Transition is running. Retrieved from https://www.scien.cx/2025/01/31/keeping-the-page-interactive-while-a-view-transition-is-running/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.