Jump to content


Animations are not shown, only on iPhone devices

Recommended Posts

I am working on implementation of another developer. I am not familiar with this library yet.
So, this issue might be a configuration issue or something like this.
It's only on iphones (tested on 4S & 6S) the svg animations are shown only when the page is scrolling!

I was expecting the opposite behavior really. :)

I have placed console messages and I figured out that the animations are applied correctly but are not rendered on the screen.

When we scroll the screen even a little bit, we get the current position of the animated objects. Since we have lost some frames the animation looks like it jumps. So this means that the animations are working behind the scene. I have also placed console messages and I saw that everything is working fine and simply the dom is not updated.

When I scroll the screen slowly the animations are running normally.

It looks like the svg changes are blocked for performance issues??? I don't know.

This happens only on iphones!!!

It tested and it works on:
- mac desktop (safari, ff)
- win desktop (ie11!!, edge, ff, chrome)
- android (chrome)

is not working on:
- iPhone 4s, 6s (safari and chrome!)
- ipad (safari)


Link to comment
Share on other sites

Hi @Dennisat, welcome to the forums!


It's very hard to troubleshoot in the dark, can you create a reduced case demo? CodePen or JsFiddle or anything where we can see and manipulate the code?


Otherwise, we have no idea what might be involved in your situation that may or may not be interfering.

  • Like 4
Link to comment
Share on other sites

I wonder if you're animating masks or something. Please see 

Safari definitely has some odd graphics rendering bugs (totally unrelated to GSAP). 



  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...



Sorry for the late response.


I tried hard to reproduce the problem in codepen but it wasn't possible.

Anyway, I found what was the problem.


The SVG renders in heavy dom documents looks to be blocked... (probably for the sake of performance) although there is no documentation anywhere regarding this!


As proof of this assumption is the solution that I found... that is not really a hack.


The solution is... LAYERS!


Forcing the browser to create an internal layer for the animation container, improves the performance (but note that this is not cheap and should be used sparingly).

A nice description for this can be found here: https://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/


  • Like 3
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.