Keeping the page interactive while a View Transition is running | By The Digital Insider

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 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.

Direct Link →

#Events, #Full, #It, #Link, #Links, #One, #Snapshots, #Testing, #Transition, #Us, #View, #ViewTransitions

---

Published on The Digital Insider at https://is.gd/ZTCcKh.