Багается анимация SVG элемента

Question

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

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

Ссылка на codepen https://codepen.io/eigoso/pen/VwPpqKq

Видео того, что происходит (светиться должны только грани, а не вся монета, плюс монета перекрывает полосы над ней): https://youtu.be/bMGdXtHpdK0

body{
  background-color: #0E0F2C;
}

#foundBit {
            animation: levitate 1s ease-in-out infinite alternate;
        }
        #bitcoinLogo {
            animation: levitate 1s ease-in-out infinite alternate;
        }
        #lightingOne {
            animation: light 2s ease-in-out infinite alternate;
        }
        #lightingTwo {
            animation: light 2s ease-in-out infinite alternate;
        }
        #lightWires, #lightWiresTwo, #lightWiresThree {
            animation: lightWire 1.5s ease-in-out infinite alternate;
        }
        @keyframes levitate {
            from {
                transform: translateY(0px);
            }
            to {
                transform: translateY(20px)
            }
        }
        @keyframes light {
            from {
                opacity: 0;
            }
            to {
                opacity: 0.48;
            }
        }
        @keyframes lightWire {
            from {
                opacity: 0.55;
            }
            to {
                opacity: 1;
            }
        }

.text {
  display: block;
  p {
    
  max-width: 100px;
  }
}

Answer 1

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

Answer 2

Оптимизировал код до одного знака после десятичной запятой с помощью SBGOMG

Всё равно в сниппет здесь не помещается, ограничение 30.000

Разместил codepen

Работает во всех современных браузерах, включая Edge

БЛОГ НА HUSL

Багается анимация SVG элемента

Ответы (2 шт):