Jump to content
Search Community

[solved] Animations run extremely slow inside iframes in Safari iOS... Anybody knows a workaround?

Friebel test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there, thisone isn't about GSAP directly, but about animations using GSAP, canvas, svg and/or whatever that run from inside iframes on iOS.

I just noticed that a lot of my animations are running very slow when running from inside iframes on iOS. So far I could unfortunately only test these in iOS through Safari, so this could be a Safari specific issue instead of iOS specific.

 

I just found this still pretty new thread on the Adobe forum with more people having the exact same issue. So it's surely iOS and/or Safari specific. Even on my mobile phone on Android all my animations run very smooth, even with pixel ratios of 3. https://forums.adobe.com/thread/2435603

 

When the same animations/interactions, like animations using GSAP draggable together with SVG, DO run very smooth in iOS when not from inside iframes.

 

On the moment these animations and interactives are just useless running from inside iframes on iOS, but I need them to play from inside iframes, so this is definitely an issue here now.

 

I know this is not directly GSAP related, but because here are so many people together probably eperiencing the same issue, I hope somebody here knows of a some workaround for this so Safari iOS users can view the interactives/animations like supposed to. Anybody here facing this issue knows a way to get past this (probably before Apple fixes the problem)? That would be very much appreciated!

Link to comment
Share on other sites

Hello @Friebel and welcome to the GreenSock Forum!

 

I remember reading awhile ago that Safari will throttle down the RAF on cross-origin iframes content until they are interacted with. Maybe it also effects non cross-origin iframes as well. Maybe you can fake trigger an interaction event handler on the iframe when the page loads, but I'm just pulling at straw here.

 

The browser might be treating that non interacted iframe as an inactive browser tab. When the browser tab is inactive the browser will automatically throttle down the requestAnmiationFrame (RAF). So that same logic would dictate that the iframe needs to be interacted with so it gains focus. But if its a cross-origin iframe than that is a security sandbox issue.

 

Happy Tweening :)

  • Like 3
Link to comment
Share on other sites

1 hour ago, Jonathan said:

I remember reading awhile ago that Safari will throttle down the RAF on cross-origin iframes content until they are interacted with. maybe it also effects non cross-origin iframes as well. Maybe you can fake trigger an interaction event handler on the iframe, but I'm just pulling at straw.

@Jonathan and @Dipscom Thanks for your responses. Yes, that's what I read too on the Adobes forum of what I included a link in my question. Strange thing though was that there is no passive animation running or whatever, but an interactive that is actively being used with touch.

 

I luckily just found the real problem. On the page there are several iframes that gets lazy loaded when almost scrolled into view. The problem that made one of the animations slower wasn't in that interactive, but in the next one. And it's a strange iOS-only thing. It works (and was tested) fine on all other devices and browsers, including Macs. But failing miserably on iOS.

 

The problem on that other animation was something nasty like:

On a resize event I set threejs to change its renderer size to window.innerWidth/window.innerHeight (in this case the width and height of the iframe), which was than triggering an resize event (why?? nothing resizes. This event never happens on window, nor on Android,nor on windows phone, nor on Macs, nor on iOS when not running from inside an iframe)... which was causing threejs to change it's renderer size triggering another resize event... and so on and so fort. And on every renderer-resize threejs made the canvas just a little bit bigger... resulting in an endless loop of the canvas slowly growing and growing and growing and growing... nasty.

So I now limit the parent to 100% width and height and set a boolean to false which was causing threejs to set absolute widths and heights in styles. Although strange that this growing happened in the first place, thankfully this did the trick.
It's like on iOS window.innerWidth and innerHeight aren't window sizes, but document sizes. And for some strange reason it thinks the document height changed or something like that. silly.

This was a real crazy one. And really only happening on iOS.... everything was working very smoothly on MacOS everywhere. crazy stuff. Glad I found out what the problem was. And that without even owning any iOS device myself...

But yes! Everything is running smooth as butter now on iOS too! :)

  • Like 4
Link to comment
Share on other sites

  • 1 year later...

The slow down of (some) animations in Safari is caused by the RAF throttle. We did testing with different scenario's to be able to find the root cause and replicate. See https://adpiler.com/blog/the-full-solution-why-do-animations-run-slower-in-safari/

 

Conclusion: 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. For the use case of a banner ad, that isn’t a real solution.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...