Cross-Document View Transitions: The Gotchas Nobody Mentions
This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).
Cross-document view transitions in CSS have several undocumented pitfalls. The `<meta name="view-transition">` tag is deprecated — the correct opt-in is `@view-transition { navigation: auto; }` in CSS. There's also a hard 4-second timeout that silently kills transitions on slow pages, debuggable via the `pagereveal` event. Image distortion during transitions (the 'taffy' effect) is caused by default `object-fit: fill` on pseudo-elements and is fixed with `object-fit: cover` on `::view-transition-old` and `::view-transition-new`. The `pageswap` and `pagereveal` events provide lifecycle hooks for coordinating transitions across documents, including just-in-time element naming. Part 2 will cover scaling `view-transition-name` across many elements and `prefers-reduced-motion` handling.
Table of contents
The Old Way is DeadYour Transition Will Randomly Die, and Here’s WhyWhy Your Images Look Like TaffyThe Two Events That Tie it All TogetherWhat’s NextSort: