Chrome blocks animations inside iframe that is not in viewport

So we have a product that contains multiple videos with progressbars (think of it like an instagram story)

This product is placed inside iframe on partner websites. The behaviour of this "story" is to play by default. The progressbars are animated with css.

The problem is that if the iframe is outside of viewport, the video will start playing but the progressbar will start animating only after the iframe enters the viewport

I replicated the issue here: https://codepen.io/capraruioan/pen/VwXXNNz hit the "reload iframe" button, wait a few seconds and scroll down and you will see the progressbar will start only when the iframe entered the viewport

Here is the code:

<button onclick="resetIframe()">reload iframe</button>
  scroll down to see animations
    <iframe id="iframe" style="margin-top: 110vh; height: 100px; display: block;" src="https://clipr.opsolutions.ro/animation.html" frameborder="0"></iframe>

and js

var url = "https://clipr.opsolutions.ro/animation.html"
        function resetIframe() {
            iframe.src = ""

            window.setTimeout(() => {
                iframe.src = url
                console.log("done")
            }, 100)
        }

I cannot find anything on webkit docs about this or how to avoid/bypass it