Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Anya

Stacking order issue on rotating overlapped elements

Recommended Posts

Hey guys,

I'm having some weird stacking order issues in Firefox and Safari, maybe someone can put me in the right direction towards fixing it.

I have 2 cards to flip, that are inline-block, side by side and have the corners overlapped (on purpose).

While they are rotating, one card gets behind the other one for a brief moment until it gets the correct order. 

This happens in Firefox. Chrome is fine.

Also, I can see a different issue in Safari that appeared recently, where rotation is not even visible. This did work a couple months ago and still works in my production code, but not on Codepen now.

 

The stacking issue in Firefox is what really matters to me right now. I tried setting z-indexes, but that didn't help, so I understand it's rendering issue? How can I go around it?

 

Thank you!

 

See the Pen vRewpq by slyka85 (@slyka85) on CodePen

Link to post
Share on other sites

Not sure what the issue is, it looks same on Firebox and Chrome on windows.

 

Maybe you are missing something from your production code. You can confirm that by opening your demo in debug mode, which will prevent codepen from messing your code. You can read following thread about stacking context, see if that helps.

 

 

 

  • Like 4
Link to post
Share on other sites

I don't see a problem in Firefox. 

 

For Safari, translateZ can fix clipping issues.

 

 

  • Like 5
Link to post
Share on other sites

Thank you guys,

@OSUblake,  you saved the day as usual :)

 

translateZ fixed the clipping of the card in Safari.

Btw, the Firefox version that I see the issue is the old Firefox51. In the newer versions this clipping does not happen.

 

 

 

  • Like 5
Link to post
Share on other sites

Hello @Anya and welcome to the GreenSock Forum!

 

Keep in mind that you should be able to just use translateZ(0px) instead of translateZ(100px). Using the translateZ() CSS function on the parent just triggers it to be on its own rendering layer. Which changes the stacking context by the mere presence of that CSS property on the element. Which also sometimes negates the use of having to use CSS perspective on the same element with translateZ() values other than 0px, to prevent artifacts.

 

Happy Tweening!

  • Like 5
Link to post
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.

×