Текстовые элементы SVG, вызывающие перебивание макета

Question

У меня очень большое количество позиционированных текстовых элементов svg на веб-странице, текстовое содержимое динамически обновляется при прокрутке при изменении переменной offSet (см. Код ниже), используя vue.js. Это обновление вызывает сбой макета, который я не могу устранить. Все мои элементы абсолютно позиционированы и измерены с использованием CSS. Что я могу сделать, чтобы предотвратить пересчет макета?

Я попытался установить свойство рендеринга текста на optimiseSpeed. Я попытался установить видимость скрытого и изменить текстовый узел каждого текстового элемента с помощью javascript, а затем установить видимость обратно на видимый, но по-прежнему вызывает сбой макета. Я также пытался установить textLength на фиксированный размер.

<svg class=svg :viewBox="viewBox" preserveAspectRatio="none">
   <g text-anchor="end">
      <text v-for="index in tickCount" :key=index  width=2 height=1
            :x="width/2"
            :y="index + 1"
            >{{index + offSet}}m</text>
   </g>
</svg>

Инструменты производительности Chrome показывают макет, занимающий много времени и снижающий FPS до <30. </p>