Lottie Web использует два основных режима отображения: SVG и Canvas.
Поведение этих режимов заметно различается в зависимости от браузера,
что напрямую влияет на визуальную идентичность анимации.
SVG-рендеринг опирается на DOM-дерево и нативные возможности
браузера. Canvas — на процедурную отрисовку через 2D-контекст. Уже на
этом уровне появляются расхождения:
- SVG чаще используется в современных браузерах для сохранения
четкости и масштабируемости
- Canvas применяется как fallback или в сложных сценах с большим
количеством слоёв
- В Safari SVG и Canvas могут давать разные результаты даже при
одинаковом JSON
Ключевая проблема заключается в том, что After Effects при экспорте
через Bodymovin не гарантирует идентичное поведение в обоих режимах.
Несовпадение
геометрии при масштабировании
Одно из самых частых проявлений некорректного отображения — смещение
и деформация объектов при изменении размеров контейнера.
Причины:
- различия в интерпретации
viewBox в SVG
- округление координат в Canvas
- особенности subpixel rendering в разных движках
В Chrome дробные координаты могут интерпретироваться более точно,
тогда как Firefox и Safari часто округляют значения иначе, вызывая
«дрожание» линий.
Особенно заметны проблемы при:
- масштабировании через CSS
transform: scale()
- адаптивной верстке с процентными размерами
- динамическом изменении контейнера через JavaScript
Lottie использует внутреннюю систему координат, основанную на данных
After Effects. Однако браузеры по-разному обрабатывают
трансформации:
- Chrome: более предсказуемая матрица преобразований
- Firefox: иногда изменяет порядок вычисления матриц
- Safari: может по-разному интерпретировать translate + scale
комбинации
Особенно критично:
- комбинирование
scale и rotation
- анимации с якорной точкой (anchor point)
- вложенные слои с независимыми transform-origin
При несовпадении вычислений возникает эффект «плавающих»
элементов.
Различия в обработке
масок и track matte
Маски и matte-слои — одна из самых проблемных зон.
SVG-режим:
- использует
clipPath и mask
- зависит от реализации браузера
Canvas-режим:
- использует ручное обрезание пикселей
- более стабильный, но менее точный визуально
Проблемы:
- Safari может некорректно применять маски при сложной иерархии
слоёв
- Firefox иногда игнорирует сложные вложенные matte-композиции
- в Chrome возможны артефакты при анимации прозрачности маски
Типичный эффект — исчезновение части слоя на отдельных кадрах или
«рваные» края маски.
Шрифты и текстовые слои
Текст в Lottie — один из самых нестабильных элементов в
кроссбраузерной среде.
Причины различий:
- отсутствие одинаковых системных шрифтов
- различие в font-metrics между браузерами
- задержка загрузки web fonts
- fallback-замена шрифта до загрузки
Chrome и Edge чаще корректно пересчитывают текстовые блоки после
загрузки шрифта. Safari может «залипать» на fallback-шрифте, из-за
чего:
- изменяется ширина текста
- ломается выравнивание
- смещаются ключевые кадры позиционирования
Canvas-рендеринг дополнительно страдает от различий в textBaseline и
измерении textMetrics.
Цветовые отличия и blending
modes
Некорректное отображение цветов проявляется при использовании:
- multiply
- screen
- overlay
- alpha blending
SVG и Canvas используют разные алгоритмы смешивания цветов.
Особенности:
- Safari часто отличается в расчёте alpha-композиции
- Firefox может иначе интерпретировать прозрачность градиентов
- Chrome ближе всего к ожидаемому After Effects поведению
Дополнительно влияет цветовой профиль дисплея (sRGB vs P3 в macOS),
из-за чего анимации выглядят «ярче» или «тусклее».
Градиенты и их несовпадение
Градиенты в Lottie Web часто ведут себя нестабильно:
- linearGradient может смещаться при масштабировании
- radialGradient искажается при нестандартных aspect ratio
- SVG и Canvas дают разную интерполяцию цветов
Safari особенно чувствителен к:
- transform внутри gradient units
- нестандартным координатным системам
В результате один и тот же JSON может выглядеть «плоско» или
«перенасыщенно».
Различия в
обработке stroke и толщины линий
Stroke векторных путей — источник частых визуальных расхождений:
- дробные значения stroke-width округляются по-разному
- align stroke inside/center/outside поддерживается не одинаково
- антиалиасинг отличается в Canvas и SVG
Firefox чаще сохраняет геометрию, но может утолщать линии. Safari
иногда визуально «размывает» тонкие линии при масштабировании.
DPI и масштабирование на
устройствах
DevicePixelRatio влияет на качество рендера:
- Canvas требует ручного масштабирования под DPR
- SVG масштабируется автоматически, но с визуальными артефактами при
трансформациях
Проблемы:
- размытые края на Retina-дисплеях при неправильной настройке
- несоответствие размеров между браузерами на одном устройстве
- скачки при изменении zoom страницы
Если контейнер не учитывает window.devicePixelRatio,
Canvas-версия может выглядеть менее чётко.
Resize и пересчёт сцен
Lottie не всегда корректно реагирует на изменение размеров
контейнера.
Типичные проблемы:
- отсутствие пересчёта при CSS resize
- задержка обновления canvas
- несоответствие aspect ratio после динамического изменения
Chrome чаще корректно обрабатывает resize через
requestAnimationFrame. Safari может требовать принудительного вызова
resize().
Firefox иногда пересчитывает layout с задержкой, вызывая визуальные
«скачки».
Анимационные тайминги и
frame drift
Несовпадение таймингов приводит к рассинхронизации анимации:
- requestAnimationFrame работает с разной стабильностью
- background tab throttling отличается между браузерами
- Safari более агрессивно замедляет анимации в фоне
Следствия:
- ускорение или замедление анимации
- пропуск кадров
- накопление ошибки времени (drift)
Canvas-рендеринг особенно подвержен накоплению drift при долгих
анимациях.
Поведение при загрузке
ресурсов
Lottie JSON может содержать внешние ассеты:
- изображения
- встроенные base64 текстуры
- ссылки на ресурсы
Различия:
- Chrome быстрее кеширует и отображает ассеты
- Firefox может задерживать рендер до полной загрузки
- Safari иногда требует повторного инициирования композиции
При асинхронной загрузке возможны:
- мигание слоёв
- временное отсутствие изображений
- смещение композиции до полной инициализации
Проблемы CORS и внешних
ресурсов
При использовании внешних изображений:
- Safari строже обрабатывает CORS политики
- Firefox может блокировать canvas tainting раньше Chrome
- Canvas становится «загрязнённым», что ломает экспорт и фильтры
Результат:
- пустые слои вместо изображений
- отключение части эффектов
- ошибки рендеринга в консоли без визуального объяснения
GPU-композиция и
аппаратное ускорение
Браузеры по-разному используют GPU:
- Chrome активно применяет compositing layers
- Safari может переносить часть операций в CPU
- Firefox использует гибридный подход
Последствия:
- различия в плавности анимации
- мерцание слоёв при скролле
- артефакты при наложении blur и shadow
Canvas может быть менее чувствителен к GPU-особенностям, но более
затратен по CPU.
Проблемы
переполнения контейнера и обрезки
При использовании overflow: hidden возникают
различия:
- SVG иногда игнорирует обрезку при трансформациях
- Canvas строго обрезает пиксели
Safari может «выпускать» части SVG за пределы контейнера при сложных
масках и blur-эффектах.
Несовместимость
некоторых эффектов After Effects
Не все эффекты After Effects корректно транслируются:
- Gaussian Blur может отличаться по интенсивности
- Drop Shadow имеет разные алгоритмы сглаживания
- Merge Paths иногда ведёт себя нестабильно
Chrome наиболее близок к ожидаемому результату, но даже он не
полностью повторяет AE.
Итоговые источники
визуальных расхождений
Некорректное отображение в разных браузерах формируется комбинацией
факторов:
- различия SVG и Canvas реализации
- неодинаковая интерпретация transform и координат
- несогласованность масок и matte-слоёв
- шрифтовые метрики и задержки загрузки
- различия в GPU-композиции
- особенности рендеринга текста и stroke
- поведение при масштабировании и resize
- цветовые и blending discrepancies