View Transitions API 2026: MPA Navigation Without an SPA

Q: What is a cross-document view transition?

It is an animated transition between two separate HTML documents during an ordinary same-origin navigation. Both pages opt in with the CSS at-rule @view-transition { navigation: auto; }. When the user follows a link, the browser snapshots the outgoing page, performs a normal HTTP navigation, renders the incoming page and animates from the old snapshot to the new one through ::view-transition pseudo-elements you can style. Elements given the same view-transition-name on both pages are paired and morph into each other, so a listing thumbnail can grow into a product hero. No client router or JavaScript framework is needed for the basic effect, which is why it matters for multi-page sites.

Q: Which browsers support view transitions in 2026?

According to MDN's browser compatibility data, the same-document API, document.startViewTransition(), is supported in Chrome 111, Safari 18 and Firefox 144 and later, so it now runs in all three major engines. The cross-document @view-transition at-rule is supported in Chrome 126 and Safari 18.2 and later, while Firefox has not shipped it and tracks the work in Mozilla bug 1860854. WebKit's Safari 18.2 release notes list cross-document view transitions among the release highlights. In practice, design cross-document transitions as a progressive enhancement: supporting browsers animate, Firefox users get an instant normal navigation, and the page works in every case.

Q: Can view transitions replace a single-page app?

For routes that use the client router only for navigation feel, yes. Blogs, documentation, marketing sites, category and product pages usually hold no client state between views, and server-rendered pages with cross-document transitions give them animated navigation without the router, hydration cost and bundle. For routes that keep live client state across views, such as editors, dashboards with in-memory filters, media players that must keep playing or multi-step forms, no: a cross-document navigation resets in-memory state, and the SPA is doing real work. Most products are a mix, so decide per route by asking what the router is holding between pages, then keep the SPA only where the answer is state.

Q: Do cross-document view transitions work across different origins or subdomains?

No. Chrome's documentation states that cross-document view transitions are limited to same-origin navigations only, and a navigation counts as same-origin only if both pages share the same origin: scheme, host and port. A link from a marketing site on www.example.com to an application on app.example.com is cross-origin and will not animate, and neither will links to third-party pages. Plan hand-offs between a marketing site and an application on separate origins as ordinary navigations, or consolidate the browsing experience onto one origin if the transition is a product requirement. Same-document transitions inside a single page are not affected by this rule.

Q: Why does my cross-document view transition sometimes not run?

Common causes: the incoming page did not opt in with the @view-transition rule; the navigation was cross-origin; the navigation took too long, since Chrome skips the transition with a TimeoutError if it exceeds about four seconds; two elements on one page share the same view-transition-name, which aborts the transition; the user's browser does not support cross-document transitions, which today includes Firefox; or your pagereveal listener was registered in a deferred or module script instead of a classic parser-blocking script in the head, or an async script marked blocking=render, so it ran too late. Check each in that order, starting with server response time.

Q: Do view transitions hurt Core Web Vitals?

They can, mostly through choices made to make them look perfect. Marking scripts or stylesheets blocking=render so the incoming page is complete before the snapshot delays first paint and can worsen largest contentful paint for every visitor, including those whose browser does not run the transition; Chrome's guidance is to avoid it unless you measure the impact. Naming many elements, or very large ones, makes snapshots expensive in memory and frame time on low-end devices. Measure largest contentful paint, interaction to next paint and navigation timing per template before and after enabling transitions, and keep named elements to the few that carry meaning, such as the clicked card and the hero image.

Q: How should view transitions handle reduced motion and accessibility?

Respect the prefers-reduced-motion user setting. Wrap the @view-transition opt-in in a media query that applies only when reduced motion is not requested, or override the ::view-transition animations to a short cross-fade or none for users who requested it, because full-viewport morphs are precisely the kind of motion that setting exists to suppress. Keep transitions short so they never delay a user who is trying to read or act, and do not encode meaning only in the animation, since Firefox users and reduced-motion users will not see it. Focus and scroll restoration still follow normal navigation rules because every view is a real document.

Q: When should you not use cross-document view transitions?

Do not use them to paper over slow pages: if the server takes seconds to respond, the transition is skipped after the timeout anyway, so fix response time first. Do not rebuild a genuine application as a multi-page site to use the feature, because cross-document navigation resets in-memory client state that editors, dashboards and players depend on. Do not adopt them where the design requires an identical animation for every visitor, because Firefox does not yet run them. And do not expect them to animate across origins. In those cases, keep the SPA and use same-document startViewTransition(), which all three major engines now support, or simply ship ordinary navigation.

Satyam Kumar

返回博客

architecture

The View Transitions API in 2026: Cross-Document Transitions Refund the SPA Tax You Paid for Smooth Navigation, in Two Engines Out of Three (2026)

By Satyam KumarOctober 10, 202613 min read

view transitions api cross-document view transitions @view-transition navigation auto startViewTransition mpa vs spa 2026 multi-page application transitions view-transition-name pageswap pagereveal events view transitions browser support firefox view transitions safari 18.2 view transitions spa to mpa migration core web vitals view transitions progressive enhancement css frontend architecture decision speculation rules prerender

The View Transitions API in 2026: Cross-Document Transitions Refund the SPA Tax You Paid for Smooth Navigation, in Two Engines Out of Three (2026)

Frequently Asked Questions

分享这篇文章

Twitter LinkedIn WhatsApp

Satyam Kumar

Founder & AI Architect, AppScale LLP

人工智能和云架构师。帮助团队构建可扩展到数百万的系统。

LinkedIn GitHub

The View Transitions API in 2026: Cross-Document Transitions Refund the SPA Tax You Paid for Smooth Navigation, in Two Engines Out of Three (2026)

Frequently Asked Questions

分享这篇文章

Comments

Leave a comment