View Transitions: Careful Not To Make Stuff Unclickable – Master.dev Blog

/ BLOG

CSSJavaScriptpointer-eventsView Transitions

View Transitions: Careful Not To Make Stuff Unclickable

Chris Coyier<br>on<br>August 7, 2026

Just a little Public Service Announcement here.

Let’s say you’re doing a View Transition in the form of using the .startViewTransition() method. Maybe you’re showing an image bigger or sorting a table or moving some list items around or something.

If you don’t deal with it specifically, it’s likely you’re blocking interactivity on the rest of the page.

Here’s a very basic demo. There is an alert() button you can click to see an alert. Click that and see. Then run the View Transition and try to click that button.

CodePen Embed Fallback

See how you can’t click the alert button while the View Transition is running?

Because of the long 10s duration in that example, it should give you enough time to open DevTools and take a peek. You should be able to see the View Transition Pseudo Tree there. And if you hover over the top one, the ::view-transition, you’ll see it cover the entire viewport in light blue, telling you the dimensions of it cover the entire viewport.

So now you’ve got this big, giant, invisible element covering the entire viewport for the entire length of the transition. That’s what stops the interactivity , like clicking.

The Solution

Two-parter here.

One, the :root element has a view-transition-name by default, so it’s going to take part in the overall View Transition even if it doesn’t really do anything. I think this is a default so that entire pages can cross-fade in multi-page View Transitions. But we don’t need that. So if we remove the name, it won’t be one of the snap-shotted elements taking up space.

Two, the ::view-transition element is also that big giant viewport-covering element, and what we need to do there is make sure you can click through it.

:root {<br>view-transition-name: none;<br>::view-transition {<br>pointer-events: none;<br>}Code language: CSS (css)

The snap-shotted (for lack of a better term) elements you actually see transitioning on a page are essentially on the "top layer" while the View Transition is happening. So they’ll soak up clicks while they are there. Not sure why that’s the default, but that’s what we got.

Another Newer Solution

Another solution here is the "scope down" the View Transition. We don’t have to call document.startViewTransition() (like, on the document) although that definitely has the best browser support. Instead, we can call that method on the element that has the elements inside it that we care to transition. Like…

const parent = document.querySelector("#parent");<br>move.addEventListener("click", () => {<br>parent.startViewTransition(() => {<br>thing.classList.toggle("moved");<br>})<br>});Code language: JavaScript (javascript)

Scoped view transitions are just a good idea, allowing for things like keeping elements in a hidden overflow area and such (because the pseudo-element tree stays within that parent element). We also benefit here as, without doing any other CSS manipulation, interactive elements aren’t affected. You still might wanna do the CSS stuff, though, if you want to retain interactivity within the scoped area.

It's time to take your JavaScript to the next level

Master.dev is the best place on the web to really learn JavaScript. We have a complete learning path from the biggest and best teachers in JavaScript to help you make the most out of the web's biggest language. Access 300+ courses with a Master.dev subscription and get 20% off today!

Personalized Learning

Industry-Leading Experts

24 Learning Paths

Live Interactive Workshops

20% Off

Start Learning Today &rarr;

One response to "View Transitions: Careful Not To Make Stuff Unclickable"

Kevin Yank says:

August 7, 2026 at 6:35 pm

Strangely, I can trigger the alert while the transition is in progress on Safari Mobile. Is this blocking behaviour Chrome-only?

Reply

Leave a Reply Cancel reply<br>Your email address will not be published. Required fields are marked *<br>Comment *<br>Name *

Email *

Website

Save my name, email, and website in this browser for the next time I comment.

Notify me of follow-up comments by email.<br>Notify me of new posts by email.

Table of Contents

The Solution<br>Another Newer Solution

Did you know?

Our courses go beyond frontend into fullstack, devops, and AI.

&rarr; Explore courses (20% off)

$966,000

Master.dev donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.

LinkedIn

Facebook

Instagram

RSS

Contact: support@master.dev

Master.dev is proudly made in Minneapolis, MN

©2026 Master.dev &middot;<br>Terms of Service &middot; Privacy Policy