Jump to content


TranslateZ stacking only working correctly in Safari

Moderator Tag

Recommended Posts



I'm trying to animate a series of objects so that they pass behind and then in front of another object. It works as expected in Safari, but not in either Chrome or Firefox (all on OS X). They seem to obey the DOM order instead. It's basically the same problem described here. I've tried everything suggested in the comments there, but it's still only working in Safari.


In the Codepen, I've also included a static object to illustrate that the stacking isn't working as desired.


Does anyone have any ideas what's wrong?




See the Pen bOymvp by notgettingstabbed (@notgettingstabbed) on CodePen

Link to comment
Share on other sites

Yeah, Safari handles things radically differently than all other browsers in terms of rendering 3D transforms. You can angle things on the 3D axis and it'll chop things in half that overlap. Other browsers just rely on z-index for stacking order, plain and simple. So I think you'll need to resort to that. This isn't an issue related to GSAP - it's just how [most] browsers work. I wish I had a magic bullet for ya. Perhaps someone else has a different solution to offer. 

  • Like 1
Link to comment
Share on other sites

Thanks for the quick response. I figured it was a browser issue, but since I came across that related topic on this forum, I thought I'd check in here. Anyway, for anyone else that's interested, I used the update function to update the z-index to match the z position. While it won't recreate Safari's rendering, it at least fixes the stacking issue. Here's an updated Codepen: 

See the Pen NeZoXP by notgettingstabbed (@notgettingstabbed) on CodePen


I have no idea if this is efficient or not, so if anyone has a better idea please share!

  • Like 1
Link to comment
Share on other sites

I'd probably use ModifiersPlugin to replace your onUpdate because it's more performant than creating a new set() tween on every single update of every element. And I didn't understand why you were creating paused tweens and then using another tween to tween those....to a progress of 3 (remember, progress can only be between 0 and 1). Here's a cleaned-up version: 



Does that help? 


  • Like 2
Link to comment
Share on other sites

That's perfect! 


I started from

See the Pen zcmpo by GreenSock (@GreenSock) on CodePen

, which is where the two tweens came from. For my demo, I eliminated the decreasing progress of the second tween that's in the referenced pen, but I have made use of it in other work. As is probably obvious, I'm not really a programmer so my code may contain unnecessary pieces that I pick up along the way (or just nonsense values). Sigh.


Anyway, thank you!

  • Like 1
Link to comment
Share on other sites

Nice work! If you're not even a programmer, then my hat's off to you :)


Happy tweening!

  • Like 1
Link to comment
Share on other sites

Hello @notgettingstabbed and Welcome to the GreenSock Forum!


First off love your forum handle, very funny.


Glad you figured it out.


Just a handy rule of thumb. Its best practice not to use any negative z-index, since it will cause you cross browser shenanigans due to stacking context of transforms and how z-depth works, aka z-index. You should never go past a value of 0, using z-index: 0 as your most bottom layer.


Happy Tweening :)

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