How to fix a buggy SVG animation?

Question

css

Good afternoon, I have an SVG image of a bitcoin, I animated it so that it levitates up and down, and also its edges are highlighted with blue light. But I noticed a problem that if you scroll down on the site, refresh it and go back to the bitcoin, then it starts to overlap other SVG elements that are above it, plus the blue glow passes through the edges and the whole bitcoin already glows. What is it, and how to deal with it? I am attaching a screenshot of the problem, in the first photo - how it should be, in the second photo - the problem.



I also noticed that if you hover over any button on the page with the mouse, the bug disappears and the animation goes as it should.

Link to SVG - https://drive.google.com/file/d/1hAWtVXoJku4RSV7hF...
Codepen: https://codepen.io/eigoso/pen/VwPpqKq
Problem video: https://youtu.be/bMGdXtHpdK0

Answer 1

I don’t know if it’s a crutch or not, but I decided by giving the elements that bitcoin overlaps an animation that does transform: scale (1), that is, it does nothing. Thanks to this, everything falls into place and always works as it should. Oh those svgs

Answer 2

Try splitting a single svg image into several smaller ones, then throw them into a single div, where you fix the position of the layers through z-index. It seems to me that due to its size, the animation after scrolling works passively saving browser resources and when you go back it simply does not have time to recover, and when you hover over the button, part of the page is rendered again and it is restored.