← На главную

WebKit ускорил анимацию SVG без слоёв LBSE, но сломан композитинг

14.07.2026 12:59 · hackernews

Layer Based SVG Engine (LBSE) в WebKit наконец-то получил условное создание слоёв — самое крупное изменение с момента запуска проекта. Раньше каждый элемент SVG — даже простой <rect> или <path> — получал собственный RenderLayer. Это было удобно для разработки, но убивало производительность: тысячи слоёв на сцену тратили память и замедляли каждый кадр. LBSE задумывался, чтобы поставить SVG на те же рельсы, что и HTML с CSS — общая RenderLayer-система даёт аппаратное ускорение, z-index, перспективу. Но платить за слои там, где они не нужны, было расточительно.

После долгой паузы в 2024 году компания Igalia профинансировала новый раунд разработки. Команда сперва починила всё, что сломалось без тестирования: текст, фильтры, feOffset, gradientTransform и кучу крашей. Затем взялась за главное — производительность в тесте MotionMark Suits, где тысячи фигур анимируются через трансформации.

Решение — убрать слои у тех элементов, которым они не нужны. Новый метод requiresLayerForSVGIntrinsicReasons() теперь решает: слой создаётся только для клиппирования, масок, фильтров, opacity, blend-mode, 3D-трансформаций и явного z-index. Обычные 2D-трансформации на листовых элементах (фигурах, тексте) слоя больше не получают — их трансформация хранится на самом рендерере и подмешивается в матрицу прямо во время отрисовки. Исключение — контейнеры с трансформацией: они пока оставляют слой, потому что композитинг строит цепочку CTM (current transformation matrix) именно по дереву слоёв, и потеря контейнера разорвала бы её. Это компромисс, но он работает.

Изменение вкатили в июне 2026 года. Теперь LBSE может работать быстро для большинства сценариев — тысячи простых фигур без лишних слоёв. Но тут же возникла новая проблема: композитинг сломался. Если один композированный элемент (например, с аппаратно-ускоренной анимацией) лежит среди обычных соседей без слоёв, строгий порядок отрисовки SVG нарушается. Композитинг умеет упорядочивать только те объекты, у которых есть слой. Как это починить — тема следующего поста. Команда благодарит разработчиков Apple за валидацию работы: Саймона, Саида, Карла и Ахмада.

Читать оригинал →