Добрый день! Второй день бьюсь. 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`;
Не кидайте камни, если вопрос глупый.
Надеюсь написал все понятно.
Подскажите, как альтернативно можно реализовать такую задачу.
