Задать вопрос
@GenriJS

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

Добрый день! Второй день бьюсь. 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`;

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

671903e25f360396697951.png

671903776f299756292586.png
  • Вопрос задан
  • 201 просмотр
Подписаться 1 Средний 3 комментария
Пригласить эксперта
Ответы на вопрос 2
@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
так у вас появится отдельный контейнер и родительский будет изменять область видимости контейнера. а вообще из объяснения нифига не понятно, нужно весь код фрагмента в студию
Ответ написан
Комментировать
@RomanKudlatov
Мобильные браузеры в частности сафари плохо относятся к большим единицам в значении размытия и размытия тени.
Для эксперимента убери фильтр в свг и сравни производительность.
В твоем случае оптимально экспортировать в растре. Можно даже уменьшить размер думаю 32x32px(вроде все браузеры сглаживают изображения при ресайзе) поэксперементируй.
Можно как писали в комментариях в webp, но и пнг если мелкий масштаб взять небольшого размера выйдет.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
11 дек. 2024, в 22:15
10000 руб./за проект
11 дек. 2024, в 22:10
3000 руб./за проект
11 дек. 2024, в 21:35
13000 руб./за проект