Вышел Firefox 159: анимации по скроллу теперь во всех браузерах. Что проверить на приёмке
27 октября Mozilla выпустила Firefox 159. Главное для веб-разработки: анимации, привязанные к прокрутке (scroll-driven animations), теперь включены по умолчанию. Вместе с этим из браузера удалён старый экспериментальный синтаксис masonry-раскладки, а HTML Sanitizer API стал очищать разметку прямо при разборе. Это следует из заметок к релизу для разработчиков на MDN и из обзора OMG! Ubuntu.
Firefox был последним из крупных браузеров без этой функции. По данным Can I use, Chrome и Edge поддерживают animation-timeline: scroll() с версии 115, Safari — с версии 26.0, а теперь и Firefox 159. Эффекты, которые раньше делали скриптами или показывали «только в Chrome», можно ставить на сайт без оговорок. И их придётся проверять в трёх браузерах, а не в одном.
Если сайт делает внешняя команда, обсудите это до старта: какие анимации допустимы, как они ведут себя при отключённом движении и в каких браузерах их принимают. Заказывая создание сайта у студии, попросите вписать анимации в критерии приёмки отдельным пунктом, а не разбирать их на последнем созвоне.
Что изменилось в Firefox 159
Анимации по скроллу по умолчанию. CSS-анимации и анимации через Web Animations API теперь могут идти не по времени, а по положению прокрутки контейнера или по тому, как элемент проходит через видимую область экрана. За это отвечают свойства animation-timeline, scroll-timeline, view-timeline и animation-range. Типичные примеры: полоска прогресса чтения, проявление блоков при прокрутке, параллакс в первом экране.
Старый masonry удалён. Значение masonry у grid-template-columns и grid-template-rows и свойство masonry-auto-flow больше не работают. На смену им пришла раскладка grid lanes (display: grid-lanes). Если кто-то в проекте пробовал masonry через экспериментальный флаг, в Firefox 159 такая сетка тихо превратится в обычный grid.
Sanitizer и пользовательские элементы. Element.setHTML() теперь убирает лишние элементы и атрибуты при разборе, а соседний текст попадает в один текстовый узел. Появились изолированные реестры пользовательских элементов для shadow DOM. Для ревью это мелочи, но они могут поменять вид блоков, куда подставляется внешний HTML.
Что это значит для ревью и согласования
Анимацию нельзя принять по скриншоту. Эффект, который запускается прокруткой, на статичной картинке не виден. Правку к нему проще оставить видео-комментарием или с указанием точки прокрутки: «блок проявляется слишком поздно, когда уже виден подвал». О том, когда видео удобнее текста, мы писали в материале о видео-фидбеке и текстовых комментариях.
Проверяйте режим «уменьшить движение». Часть пользователей отключает анимации в настройках системы. Сайт должен уважать prefers-reduced-motion: контент виден сразу, ничего не прячется до прокрутки. Это вопрос и удобства, и доступности.
Фиксируйте браузер и версию в каждой правке. До 27 октября «в Firefox анимации нет» было нормой, теперь это баг. Чтобы не спорить, кто смотрел в какой версии, окружение должно попадать в комментарий автоматически.
Что делать сейчас
Обновите Firefox у себя и у клиента. Пройдите страницы текущих проектов с анимациями: первый экран, лендинги с проявлением блоков, длинные статьи с прогрессом чтения. Отдельно поищите в стилях masonry. Найденные расхождения добавьте в чек-лист приёмки сайта, чтобы в следующем проекте их проверяли с самого начала.
