Jump to content
Search Community

Performance issue during animation in Safari 9. How to improve?

stype 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

On a page I'm working on I encountered a performance issue in Safari 9 (OS X 10.10.5 Yosemite). In Chrome the page renders super smooth, but in Safari 9 it is constantly lagging until the animations finish. Safari on OS X 10.11 works fine, though. Does someone have a similar issue and a solution for this?


I got the animation code in the codepen, but its not running there yet. Too many dependencies. You might have a look at the page with the problem (portrait gallery if you scroll down a bit):



Thanks in advance for any help!

See the Pen PzmBmb by stype (@stype) on CodePen

Link to comment
Share on other sites

Tough to say without a reduced test case, but I would definitely recommend using the transform-related shortcut properties like "x", "y", "rotation", etc. instead of literally tweening the "transform" property because they are more performant (and more precise for rotational values beyond 360 due to inherent limitations of matrix decomposition). 


In other words:

TweenLite.to(...{x:100, y:0, z:0});

Beyond that, though, if you still need some help it'd significantly increase your chances of getting a good answer if you create a reduced test case in codepen. Often times the process of creating something like that will reveal the problem to you, and you won't even need our help :)

  • Like 1
Link to comment
Share on other sites

By the way, I noticed that most of the performance issues were encountered when SVGs were moving. You might want to just try swapping in PNG files for those temporarily to see if you notice a significant difference. Another thing to try would be inlining the SVG directly into the HTML. You shouldn't have to do that, of course - the browser should handle it fine, but perhaps you're stumbling on a Safari rendering bug related to SVGs inside <img> tags or something.


Oh, and maybe make sure that the raw artwork in the SVG itself is sized appropriately. For example, perhaps if the native size is 2000x2000 but you're only dropping it into a 100x100 area, Safari's rendering engine may rasterize the full 2000x2000 pixels before scaling it down which could cause a lot more overhead. Again, I'm totally taking shots in the dark here, but I figured I'd give you some thoughts to try in case it helps. 

  • 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.
  • Create New...