When utilizing View Transitions you’ll discover the web page turns into unresponsive to clicks whereas a View Transition is working. […] This occurs due to the
::view-transition
pseudo component – the one which comprises 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, that means the total web page is interactive even whereas the view transition is working.
::view-transition {
pointer-events: none;
}
I at all times, at all times, at all times overlook about pointer-events
, so because of Bramus for posting this little snippet. I additionally admire the extra be aware 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:
Parts 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.
Holding the web page interactive whereas a View Transition is working initially revealed on CSS-Tips, which is a part of the DigitalOcean household. You need to get the e-newsletter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!