Stacking order issue on rotating overlapped elements

[Anya]

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

[Sahil]

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.

 

 

 

[OSUblake]

I don't see a problem in Firefox. 

 

For Safari, translateZ can fix clipping issues.

 

 

[Anya]

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.

 

 

 

[Jonathan]

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!