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.

😳😊

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.

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...

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.

Even if it is spec conform, a bug report might help to get better error messages for this in the browser.

Your page has some overflow that forces the mobile browser to zoom out. If you clip all overflows, the issue should also be gone.

Happy to hear that it helped. It is point 15 on my check-list: vtbag.dev/tips/view-tr...

I am curious to see if it helps.

yep, could be it:

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">

Hi mero 👋, yes that sounds strange. If you have a repo to share, I would be happy to take a look.

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. 😏

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 ;-)

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.