У меня есть 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;
}
}