Inconsistency in rendering SVG animation in browser

[nirmalathapa]

Browser: Version 69.0.3497.100 (Official Build) (64-bit)

I used vivus instant animation couple of months ago to make the self drawing image. It was working fine but then later noticed that there is inconsistency rendering the drawing effect. The SVG animation works fine when loading the first time but later when it is refreshed the animation effect is gone. It only works with the hard refresh in order to work the animation. Have used both inside html and as css background. It creates the same inconsistency. I am afraid I have not added the svg file because it is too long. However i have attached the gif that renders only once.

[maxwellito]

Mmmmm... if it restart the animation only on hard refresh it's probably because the DOM is not recreated on your 'classic' refresh. Do you use a framework or something?

[nirmalathapa]

Only used jQuery to make svg load after the document is ready

[maxwellito]

No examples I could see? That could be helpful :)

[nirmalathapa]

oops sorry :) in this code i have used SVG as css background with the other animation.

$(document).ready(function () {
    $('.organ').hide();
    $('.organ-system').hide();
    var tissue = document.querySelector(".tissue-container");
    if (tissue == null) {
        return
    }

    tissue.addEventListener("animationend", function () {
        $('.organ').show();
        $('.organ-system').hide().delay(4000).queue(function (n) {
            $(this).show();
        })
    });
});

the background in css

.organ {
  background: url("./heartfinal_animated.svg");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: auto;
  margin: 0 auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}