Restart Gif delay Bug?

I have a weird delay while restarting gifs (for the first time) on mobile devices. I don't know where it's coming from. I guess it's a performance issue, but I don't know how to solve it.

On my page there's a gif and a cover image on top of it. When a User tapholds the Cover image, the (cover)image gets hidden and the gif in the back is "restarted" by a script.

The Code looks something like this:

resetGif('backgroundGif');
var cover = document.getElementById('cover');
cover.style.opacity = '0';

//helper function
function resetGif(id) {
    var img = document.getElementById(id);
    var imageUrl = img.src;
    img.src = "";
    img.src = imageUrl;
};

In Chrome Dev Tools it works fine. But on mobile (iOs and Android) there is a delay. When I load the website all Gifs (in the background) run to the end and "wait" until I unhide their cover to be restarted. The first time I do that, the restarting of the gif takes maybe 100ms, so the end of the gif is visible for some time before it restarts. If I repeat it after that it's fine.

Here's a gif of it, because it's not visible on desktops: The cover picture is the first frame of the gif and the gif waits in the background to be restarted when the cover is hidden

I thought it's maybe a Repaint problem. Because the code to hide the cover image comes after the restart. I tried forcing a repaint by re-displaying it:

var style = window.getComputedStyle(img, null);
var display = style["display"];
img.style.display = "none";
img.style.display = display;

or with:

window.requestAnimationFrame(resetGif);
cover.style.opacity = '0';

But neither changed anything.

Anyone has an idea?

Thanks a lot :)