iFrame plays HTML Canvas animations slower in Safari

[Kieren Smith]

Hey All,

Does anyone else experience slow playback when loading HTML canvas animations into iFrames within Safari? e.g. a banner ad?

I have tested this within Safari on my computer and it only seems to be happening on my own computer... And It doesn't happen in Chrome or firefox.

And the weird thing is when I click the animation in safari. The animation then speeds up and plays at normal speed. I'm wondering if there is some sort of idle thing happening within my safari that plays banners at a slower speed on purpose until I interact with it.

This doesn't seem to happen on other machines I've tested on. And I've created banner ads using GWD as well, and those play at a normal speed within iFrames.

If I open the index file in safari it plays normally, it's just when it's being loaded into iFrames.

Anyone able to shed some light on this weird anomaly?

Here is a link to the banner example loaded in an iframe: scrn Dashboard - (just pop your name and email address in to view the banner)

*Update: I have also tested on iphone safari and chrome. Both chrome and safari are playing the Adobe CC banners slower until they have been interacted with. As soon as you touch the banner it speeds up in both Chrome and Safari on iOS devices.

Message was edited by: Kieren Smith

[Takeapunt]

Also very frustrated by this.

I imagine Apple has done it to make Safari run faster and use less power – throttle the web ads. I don't see them going back on that decision, so if Adobe want web ads made in Animate to run properly on Safari, they'll need to press Apple for action, or find a way to code around them.

[jorritb1]

Yes, Safari is throttling the RAF (requestanimationframe) if the iframe is cross-origin and the user doesn't interact with it. We tested all scenario's, see our tests here: https://adpiler.com/blog/the-full-solution-why-do-animations-run-slower-in-safari/

[jorritb]

We found customers having the same issue, so we decided to test this. We found the final reason: 

"Safari seems to throttle the RAF (requestanimationframe) when the iframe is cross-origin. The throttle will be disabled when a user will interact with the banner, like clicking, but even right-mouse click would do."

Although we know the reason, there's unfortunately no solution or workaround for this yet.

Full details about the test here: https://adpiler.com/blog/the-full-solution-why-do-animations-run-slower-in-safari/