Как исправить баганную анимацию SVG?

Question

[Глеб Клименко]

Добрый день, у меня есть SVG-картинка биткоина, я ее анимировал так, что она левитирует вверх-вниз, а также у нее подсвечиваются грани голубым светом. Но я заметил проблему, что если на сайте листнуть вниз, обновить его и вернуться обратно к биткоинку, то он начинает перекрывать другие элементы SVG, которые находятся над ним, плюс голубое свечение проходит сквозь грани и светится уже весь биткоин. Что это такое, и как с этим бороться? Скриншот проблемы прилагаю, на первом фото - то, как должно быть, на втором фото - проблема.



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

Ссылка на SVG - https://drive.google.com/file/d/1hAWtVXoJku4RSV7hF...
Codepen: https://codepen.io/eigoso/pen/VwPpqKq
Видео проблемы: https://youtu.be/bMGdXtHpdK0

Comments

[Максим]

это не анимация это картинка

Answer 1

[Глеб Клименко]

Не знаю, костыль или нет, но решил тем, что задал элементам, которые перекрывает биткоин, анимацию, которая делает transform: scale(1), то есть ничего не делает. Благодаря этому, все встает на свои места и всегда работает как надо. Ох уж эти svg

Answer 2

[DivineDraft]

Попробуйте разделить единую svg картинку на несколько малых, далее закиньте их в единый див, где зафиксируйте положение слоев через z-index. Мне кажется, из-за ее размеров, анимация после прокрутки работает пассивно экономя ресурсы браузеры и когда возвращаетесь обратно просто не успевает восстановится, а при наведении на кнопку - часть страница рендерится снова и она восстанавливается.

Comments

[Глеб Клименко]

спасибо за совет, буду пробовать.