I'm trying to make an interactive button in my single-page webapp, where a non-looping animated GIF can be restarted upon a user interaction, or specifically a click.

I've looked through the Web and found that you can't restart an animated GIF from HTML, CSS, or JS, but you can work around it by temporarily changing the source URL to something else, at the cost of a flash of blankness or a placeholder image, like this.

function restartGif() {
  const x = document.getElementById('itsPronouncedJiff');
  x.src = "./static.gif"; // or remove the source parameter outright
  setTimeout(() => {
    x.src = './animated.gif';
  }, 1);
}

However, using this solution on Firefox does not work. Setting the source back to the animated GIF skips immediately to the final frame, instead of playing the GIF from the beginning.

Not even a solution that deletes the original element and appends a clone works:

function restartGif{
  const x = document.getElementById('itsPronouncedJiff');
  const btn = x.parentElement;
  const y = x.cloneNode(true);
  btn.removeChild(x);
  setTimeout(() => {
    btn.appendChild(y);
  }, 10);
}```

Does anyone have a workaround for this? (I'm not using jQuery.)