Bag of Tricks for View Transitions
banner
vtbag.dev
Bag of Tricks for View Transitions
@vtbag.dev
The 👜 Bag of Tricks ✨ for View Transitions | https://vtbag.dev
The 👜 Bag of Tricks ✨ for Astro's Client Router | https://events-3bg.pages.dev
Tools, Info, Tips & Tricks
Enhance Your Development Skills with the View Transition API
When you scroll down a bit, the top edge of the pages disappears under the navbar. I thought it would make sense for page transitions too. Without z-index 1000 and 1001 on the hero and page-header pseudos, the navbar covers everything during navigation. Turns out, group(nav) needs no z-index at all.
November 12, 2025 at 3:02 PM
😳😊
November 6, 2025 at 3:08 PM
Also, while the animation is playing, the page is usually not interactive. The default animation duration is 250 ms, but both the timing and the interactivity can be adjusted.
November 4, 2025 at 8:59 PM
We are talking about just a few milliseconds, definitely well below 100 ms, even when combined with a slow network and a low-end device: www.corewebvitals.io/pagespeed/vi...
The Impact of CSS View Transitions on Web Performance
Understand why and when view transitions might impact web performance
www.corewebvitals.io
November 4, 2025 at 8:53 PM
When you use CSS view transitions between pages (that is, the cross-document approach with @view-transition{} for multi-page sites) there is a small performance cost because the browser needs to capture snapshots of both the old and the new page.
November 4, 2025 at 8:53 PM
Even if it is spec conform, a bug report might help to get better error messages for this in the browser.
October 29, 2025 at 2:21 PM
Your page has some overflow that forces the mobile browser to zoom out. If you clip all overflows, the issue should also be gone.
October 29, 2025 at 2:19 PM
I am curious to see if it helps.
October 29, 2025 at 2:08 PM
yep, could be it:
October 29, 2025 at 2:04 PM
I might have some idea what's going on.

Could you please try to replace the "initial-scale=1" with "minimum-scale=1" in
<meta name="viewport" content="width=device-width, initial-scale=1">
October 29, 2025 at 1:57 PM
Hi mero 👋, yes that sounds strange. If you have a repo to share, I would be happy to take a look.
October 28, 2025 at 2:01 PM
Hi Jeroen👋. Sorry for being late to the party. Its all in Bramus' video ;-) Couldn’t have said it better myself. And let’s be real, I probably wouldn’t have come close. 😏
October 26, 2025 at 5:37 PM
Hey best web docs around! You might want to be careful not to raise false hopes about Firefox. It already does amazing view transitions, but the way your post is written, it sounds like Firefox 144 would already support the view-transition at-rule. This still remains a dream for a future day ;-)
October 20, 2025 at 9:02 PM
Hi Janis, vielleicht versteckt sich das ja hinter den ... 21 more ... pseudo-classes? Ansonsten kann ich noch :active-view-transition und :active-view-transition-type() anführen, sowie bei den Pseudoelementen das relativ neue ::view-transition-group-children.
October 20, 2025 at 7:53 AM