Представьте, вы завернули в плавный переход сортировку таблицы, открытие картинки на весь экран или перестановку карточек в списке — всё то, ради чего и берут
startViewTransition(). Пока анимация идёт, пользователь жмёт кнопку в другом углу экрана, и ничего не происходит. Он жмёт ещё раз, но ничего не происходит. Дело не в вашем коде. На время перехода браузер кладёт поверх страницы псевдоэлемент
::view-transition размером во весь вьюпорт, и клики достаются ему. Разобрал это Крис Койер, придумавший CSS-Tricks и CodePen: в его демке рядом с анимацией стоит кнопка с alert(), и пока идёт переход, она не отвечает.Проверить у себя просто: растяните длительность перехода секунд до десяти и откройте в DevTools дерево псевдоэлементов. Наведите курсор на
::view-transition — подсветится весь экран.К счастью, лечится проблема всего в две строки. Снимаем у
:root дефолтный view-transition-name, чтобы корень не попадал в снимок, и разрешаем кликать сквозь оверлей::root { view-transition-name: none; }
::view-transition { pointer-events: none; }Альтернатива — вызывать
startViewTransition() не на document, а на контейнере с нужными элементами: тогда и оверлей накроет только его. Но поддержка у этого варианта хуже, так что по умолчанию проще держать две строки выше.#css