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

[stype]

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):

http://mbs-team.de/mbs-werbeagentur

 

Thanks in advance for any help!

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

[GreenSock]

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:

//OK: 
TweenLite.to(...{transform:"translate3d(100px,0px,0px)"});
//MUCH BETTER: 
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

[GreenSock]

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. 

[stype]

Many thanks for the various thoughts!
I'll give them a shot and get back here, and setting up a working example.