Проблемы в Internet Explorer

Поддержка SVG в Internet Explorer существенно отставала от современных браузеров, что напрямую влияло на работу библиотек, построенных вокруг анимации векторной графики, включая Vivus. Основная проблема заключалась не только в отсутствии части возможностей стандарта SVG, но и в нестабильной реализации DOM API, на котором строится вся логика управления путями и их динамическим изменением.

Internet Explorer 9–11 поддерживает SVG частично, однако поведение многих ключевых механизмов отличается от спецификации. Vivus опирается на изменение параметров stroke-dasharray и stroke-dashoffset, что требует корректной работы вычисления геометрии пути и обновления стилей в реальном времени.

В IE наблюдаются следующие критические ограничения:

  • нестабильное обновление stroke-dashoffset при динамических изменениях
  • задержки перерисовки SVG после изменения атрибутов
  • некорректное вычисление длины пути через getTotalLength
  • частичные сбои при работе с getBBox

Эти особенности приводят к тому, что стандартный механизм поэтапного «рисования» линий может выглядеть рывками или полностью нарушаться.

Отсутствие SMIL и влияние на архитектуру Vivus

Internet Explorer полностью игнорирует SMIL-анимации (<animate>, <animateTransform>), что исторически делало невозможным декларативную анимацию SVG.

Vivus изначально не использует SMIL, однако эта особенность важна в контексте fallback-решений. Многие альтернативные библиотеки опирались на SMIL как резервный механизм, тогда как в IE такой вариант отсутствует полностью.

По этой причине единственным рабочим подходом остаётся JavaScript-манипуляция атрибутами, что увеличивает нагрузку на главный поток и требует оптимизации таймингов.

requestAnimationFrame и деградация таймингов

Ключевой механизм Vivus — синхронизация анимации с кадровым циклом через requestAnimationFrame. В IE9–IE10 его поддержка отсутствует, а в IE11 работает с ограничениями производительности.

Типичная проблема:

  • падение FPS при сложных SVG
  • неравномерные интервалы вызова callback
  • несоответствие реального времени анимации заданной длительности

Используется полифилл:

window.requestAnimationFrame =
  window.requestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function (callback) {
    return setTimeout(callback, 16);
  };

Однако setTimeout не обеспечивает стабильного кадрирования, что приводит к визуальному «дрожанию» линий при отрисовке.

Проблемы DOM API: classList, querySelector и события

Vivus активно взаимодействует с DOM-элементами SVG, добавляя классы и изменяя атрибуты. В старых версиях Internet Explorer отсутствует classList, что ломает стандартные методы управления состоянием элементов.

Альтернативная реализация:

function addClass(el, className) {
  if (el.classList) {
    el.classList.add(className);
  } else {
    el.className += ' ' + className;
  }
}

Дополнительные ограничения:

  • querySelectorAll работает медленнее и не всегда корректно обрабатывает SVG-узлы
  • addEventListener заменяется на attachEvent
  • события не всплывают одинаково для SVG-элементов

Это приводит к необходимости писать обёртки, полностью дублирующие поведение стандартных API.

SVG-геометрия: getBBox и getTotalLength

Vivus критически зависит от вычисления длины пути для построения анимации. В IE возникают проблемы с:

  • getBBox() возвращающим некорректные значения для скрытых или не вставленных в DOM элементов
  • getTotalLength() иногда возвращающим 0 для сложных кривых
  • задержкой пересчёта геометрии после изменения DOM

Особенно проблемными оказываются пути, созданные динамически через JavaScript, а не загруженные как статический SVG.

Решение обычно заключается в принудительном reflow:

el.getBoundingClientRect();

или временном добавлении элемента в DOM перед вычислением.

CSS трансформации и SVG в IE

Internet Explorer имеет собственную модель трансформаций, отличную от стандартной SVG transform.

Проблемы включают:

  • отсутствие поддержки transform-origin в SVG
  • различие между CSS transform и SVG transform
  • игнорирование scale и translate в некоторых контекстах

Vivus редко использует трансформации напрямую, но при комбинировании с внешними стилями анимации возникают конфликты, особенно при попытке масштабирования SVG-контейнеров.

Inline SVG как обязательное условие

В IE наблюдаются серьёзные ограничения при работе с внешними SVG-файлами (<img src="file.svg"> или <object>):

  • невозможность доступа к внутреннему DOM SVG
  • блокировка изменения stroke-dasharray
  • отсутствие синхронизации стилей

Vivus требует inline SVG для полноценной работы, так как только в этом случае доступен полный контроль над элементами <path>.

Проблемы производительности

Даже при корректной реализации API Internet Explorer демонстрирует низкую производительность при:

  • большом количестве SVG-путей
  • сложных кривых Безье
  • одновременной анимации нескольких элементов

Основная причина — синхронное обновление layout при каждом изменении атрибута. В отличие от современных браузеров, IE чаще вызывает перерасчёт стилей и геометрии.

Типичный эффект:

  • рост CPU load
  • пропуски кадров
  • задержки между изменением stroke-dashoffset и визуальным обновлением

Особенности работы stroke-dasharray

Механизм Vivus основан на следующем принципе:

  • вычисляется длина пути
  • stroke-dasharray устанавливается равным длине
  • stroke-dashoffset уменьшается по времени

В Internet Explorer:

  • обновление stroke-dashoffset может не приводить к мгновенной перерисовке
  • комбинация CSS и SVG атрибутов работает нестабильно
  • некоторые значения округляются иначе, чем в стандарте

Это создаёт эффект «ступенчатой» анимации, особенно на кривых высокой плотности.

Полифиллы и совместимость

Для стабильной работы Vivus в IE требуется набор полифиллов:

  • requestAnimationFrame
  • classList
  • Array.prototype.forEach (для IE8–IE9 сценариев)
  • Object.keys
  • SVGElement.getTotalLength (частично или через fallback-обёртки)

Дополнительно часто вводится ручная эмуляция событий:

function triggerEvent(el, eventName) {
  var event = document.createEvent('Event');
  event.initEvent(eventName, true, true);
  el.dispatchEvent(event);
}

Поведение Vivus в условиях деградации браузера

В Internet Explorer библиотека часто переводится в упрощённый режим работы:

  • увеличенные интервалы анимации
  • уменьшение количества одновременно обрабатываемых путей
  • отказ от сложных режимов синхронизации (sync, delayed)

Особенно режим oneByOne, который визуально наиболее требователен, может терять точность тайминга и выглядеть несогласованным.

Дополнительным фактором является отсутствие GPU-ускорения для SVG в IE, что делает всю отрисовку полностью CPU-зависимой.

Итоговое поведение SVG-анимации в IE

Совокупность ограничений приводит к тому, что Vivus в Internet Explorer работает функционально, но с заметными визуальными компромиссами:

  • менее плавная анимация
  • возможные задержки обновления кадров
  • неточности в геометрии путей
  • зависимость от полифиллов и обёрток DOM API
  • высокая нагрузка на процессор при сложных сценах
Оглавление