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 component – 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 “below” the pseudo-element, which means the complete web page is interactive even whereas the view transition is operating.
::view-transition {
pointer-events: none;
}
I at all times, at all times, at all times neglect about pointer-events
, so because of Bramus for posting this little snippet. I additionally recognize the extra word about eradicating the :root
component 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 component’s DOM location doesn’t correspond to the place its contents are rendered.