Cross-document view transitions: ловушки, о которых никто не предупреждает

Кроссдокументные view transitions выглядят заманчиво: плавные переходы между обычными HTML-страницами, без React, без клиентского роутера, без фреймворка. Браузер сам снимает снапшоты и анимирует между ними. Звучит просто — пока не садишься реализовывать.

Первая ловушка: мета-тег мёртв

Половина туториалов до сих пор показывает вот это:

<!-- УСТАРЕЛО — не копируй из старых статей -->
<meta name="view-transition" content="same-origin">

Этот синтаксис deprecated. Chrome его выпустил, а потом заменил на CSS-based opt-in — и никто не пошёл обновлять старые посты. Актуальный способ подключения выглядит так:

/* Добавь в CSS на каждой странице */
@view-transition {
 navigation: auto;
}

Два HTML-файла, одно CSS-правило на каждом — и между ними работает плавный кросс-фейд. Никакого JavaScript, никаких мета-тегов, никакого билд-степа.

По состоянию на 2026 год кроссдокументные view transitions поддерживаются в Chromium-браузерах и Safari 18.2+. Firefox — в процессе.

Почему вообще перешли с мета-тега на at-rule? Мета-тег был слишком грубым инструментом: включить/выключить для всей страницы целиком. Нельзя было сказать «на мобильных с медленным железом — отключи». Нельзя было реагировать на пользовательские настройки. @view-transition в CSS даёт полноценный контекст: медиа-запросы, prefers-reduced-motion, условная логика.

Что ещё поломает тебе субботу

Автор оригинального разбора обещает во второй части серии:

• 4-секундный таймаут — браузер молча убивает переход, если страница загружается слишком долго; как его поймать в DevTools и что с этим делать;
• искажение aspect ratio у картинок во время анимации — эффект «комнаты смеха», который появляется на любом image-heavy сайте;
• события pagereveal и pageswap — точки входа для программного управления жизненным циклом перехода;
• масштабирование view-transition-name на десятки и сотни элементов без превращения стилей в кашу — включая разницу между view-transition-name и view-transition-class, паттерны just-in-time именования и правильную обработку prefers-reduced-motion.

Почему туториалы такие запутанные

Вторая системная проблема — смешение двух разных фич в одном поисковом пространстве. «Same-document» переходы через document.startViewTransition() в JavaScript и «cross-document» переходы через @view-transition в CSS — это разные вещи с разным API, разной моделью и разными граблями. Гугли «view transitions tutorial» и попробуй с первого абзаца понять, о чём вообще речь.

Если ты уже дошёл до момента, когда мета-тег не работает, JS-апи не стреляет на MPA, а картинки тянутся как резиновые — это не ты сделал что-то не так. Это экосистема документации не поспевает за спецификацией, которая продолжает двигаться. 🦆