Sunday, February 9, 2025
HomeProgrammingConserving The Web page Interactive Whereas A View Transition Is Operating

Conserving The Web page Interactive Whereas A View Transition Is Operating


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.


Direct Hyperlink →

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments