Как обойти проблему перегруза DOM?

Question

[GenriJS]

Добрый день! Второй день бьюсь. ChatGPT не помогает.
Есть задача анимировать градиент на заднем фоне блока.
Градиент состоит из 9 svg пятен....
Я расположил их так "position absolute top: xx%; left: xx%"
Прописал им несколько анимаций типа такой
@keyframes gradient-flow-up {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(-17%);
}
100% {
transform: translateY(0%);
}
}

И все здорово, визуально меня устраивает, на компьютере работает корректно. Но когда я подключился с телеофона возникли серьезные проблемы.
Дело в том, что в родительском контейнере, помимо svg файлов градиента, лежат контейнеры которые при нажатии кнопок раздвигаются меняя свою высоту. Это в свою очередь вызывает изменение высоты родительского контейнера, что в свою очередь вызывает перерасчет положения svg. После пары нажатий сайт благополучно вылетает.

Помимо прочего оочень сильно начала тормозить анимация разворачивания этих самых контейнеров и переключения switch. Понимаю что из-за перегрузка DOM.

Тесты показали что убрать анимацию не помогает абсолютно никак. Позиционирование элементов svg без использования %, с использованием px помогает. Но визуально не добиться нужного результата.

контейнеры, если что, меняют высоту так description.style.height = `${description.scrollHeight}px`;

Не кидайте камни, если вопрос глупый.
Надеюсь написал все понятно.
Подскажите, как альтернативно можно реализовать такую задачу.

Comments

[GenriJS]

Только написав вопрос, появилась идея. Завернул все градиенты в контейнер с фиксированной высотой. Весь этот код напоминает один большой костыль, но работает. Дальше медиа-запросами дам разные варианты высот и вопрос закрыт.

Однако, при расширении блоков - не хватает высоты градиента. Попробую увеличивать её на значение высоты расширяемого блока js-ом.

[Aetae]

Ну в принципе это и есть единственный вариант. Ну кроме как поставить фоном видео.:)

Тормозит оно из-за сочетаний анимаций. Думаю если при развороте блока заранее ставить финальную высоту контейнеру с градиентом, то работать будет куда лучше.:)

[Сергей delphinpro]

попробуйте отказаться от svg в пользу растра. webp формат для меньшего веса. должно заметно уменьшить нагрузку.

Answer 1

[ototoro]

Как я понимаю у вас проблема зацикливания. Изменение размеров приводит к изменению позиций они меняют размер и т.д. Во первых, вам нужны не % а vw и vh величины которые отталкиваются от размеров экрана а не конкретного элемента. Что конкретно нужно сделать. 1 сделайте контейнер для svg с размерами привязанными к размеру экрана

.glob-cr {
        position:relative;
        overflow: hidden;
    }
    .svg-cr {
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
    }

svg элементы внутри можете позиционировать так же как в % и в vw и vh
так у вас появится отдельный контейнер и родительский будет изменять область видимости контейнера. а вообще из объяснения нифига не понятно, нужно весь код фрагмента в студию

Answer 2

[RomanKudlatov]

Мобильные браузеры в частности сафари плохо относятся к большим единицам в значении размытия и размытия тени.
Для эксперимента убери фильтр в свг и сравни производительность.
В твоем случае оптимально экспортировать в растре. Можно даже уменьшить размер думаю 32x32px(вроде все браузеры сглаживают изображения при ресайзе) поэксперементируй.
Можно как писали в комментариях в webp, но и пнг если мелкий масштаб взять небольшого размера выйдет.