3D transform issue in Chrome

[Wigchert 0 Likes (Newbie)]

Hi guys,

 

At the moment I'm working on a rotator that rotates between 3 tabs with a 3D perspective (middle tab in the front and 2 on the sides that are in the back). It's all working fine on the platforms and browsers I've tried except for Chrome (both Windows and Mac).

 

The problem there is that one of the side tabs is not rendering on the Z axis while if you inspect it in dev tools the overlay shows the tab in the right position.

 

Here is how it is supposed to look:

http://puu.sh/bAamR/98bab7014e.png

 

Here is how it actually looks:

http://puu.sh/bAaod/da2a27ac77.png

 

And here is a working demo file I've put online:

http://lwigchert.nl/test/demo_issue.html

 

It might be an issue with the z-index because when you play around with that the tabs seem to switch.

 

If there is anything else needed that may help, let me know!

[Jonathan 5,176 Likes (Superhero)]

Hello Wigchert, and welcome to the GreenSock forum!

 

To figure what was going on i had to create your example in codepen to debug the code live.

 

This is a browser bug in Google Chrome for 3D transforms -  translateZ() or z-axis in translate3d() that affects z-index stacking order.. and has been around awhile.

 

Working example using transformPerspective on each transformed element (test in Chrome):

 

See the Pen tAbnE by jonathan (@jonathan) on CodePen

 

So the best thing to do in this case, is just use the transform: perspective (transformPerspective) on your element instead of using perspective on the transformed elements parent. And add transformStyle: preserve-3d to fix the Chrome z-index transform bug to each transformed element.

// added transformStyle and transformPerspective
//TweenLite.set($('#wrapper'), {perspective: 600});
TweenLite.set($('.tab'), {
           transformStyle: "preserve-3d",
           transformPerspective: 600
}); 

:

Working example using perspective and transformStyle: preserve-3d to fix Chrome Bug (test in Chrome):

 

See the Pen mFwhE by jonathan (@jonathan) on CodePen

 

Or keep perspective on your #wrapper element and add transformStyle: preserve-3d to each of the #wrapper children .tab element

// or you could do this instead
TweenLite.set($('#wrapper'), {perspective: 600});
TweenLite.set($('.tab'), {transformStyle: "preserve-3d"}); 

:
What i did was:

1. I removed perspective off your #wrapper element.
2. Set transformPerspective and added transform-style: preserve-3d (transformStyle) on each element (in this case .tab) . Please note that transformStyle could have also been added on your #wrapper element instead
3. You might benefit by adding backfaceVisibility:hidden to your .tab elements also.

Why I did this?

 

By adding transformPerspective and transformStyle preserve-3d ..  it fixes a bug in Chrome that renders transformed elements wrong with z-index stacking order and transform-style: flat,  due to the Chrome Bug affecting default value of flat for transform-style.

 

As a rule of thumb.. what i due is if i use the z-axis (z) .. i.e. translateZ() or translate3d() .. with z-index.. then I use transformStyle: preserve3d to make sure this bug doesn't affect z-index stacking when used with CSS3 transforms.

 

You could also just remove the z-index from the element with the transforms and add the z-index to its parent, to not be affected by the Chrome z-index transform-style flat bug.

 

perspective  = perspective() adds perspective to the elements children

transformPerspective = transform: perspective() adds perspective to the element it self

 

Chrome Bug Issue:

https://bugs.webkit.org/show_bug.cgi?id=61824

http://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d

 

And that's it..  I hope this helps Wigchert!