translateZ() .. Is this a bug in Chrome and Firefox

[Jonathan 5,176 Likes (Superhero)]

Hello fellow GreenSockers!

 

I was looking over StackOverflow GSAP questions to answer .. and ran into this question. Css 3 translate Z not working in Firefox

 

I made a codepen demo example to help the user:

 

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

 

But in the DOM you see the translate Z (translate3d) value being changed. But visually there is no animation.

 

I even tried to use GSAP z instead of transform translateZ() .. but still no visual movement.

 

x and y work but not z on both Chrome and Firefox.

 

Tested on Windows 7 PC

 

I even tried adding transform-style:preserve-3d and perspective to its parent.. but still no visual movement.

 

Any ideas why? Or are my eyes deceiving me?

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

[Rodrigo 2,662 Likes (Superhero)]

Hi Jonathan,

 

Either of the following lines solves the issue:

//apply perspective to the wrapper element
TweenLite.set("#wrapper", {perspective:750});

//apply transform perspective to the element
TweenLite.set(".box", {transformPerspective:750});

Also I'd like to take the opportunity to share that the default transform perspective of the CSS Plugin is not working since version 1.13.0. If you use 1.12.1 it works as expected:

 

See the Pen DiqnH?editors=011 by anon (@anon) on CodePen

 

Rodrigo.

[Jonathan 5,176 Likes (Superhero)]

Thanks Rodrigo ... ahh that explains it .. i tested perspective using defaultTransformPerspective with 1.13.1 .. I feel like a jerk.. i thought i was going bonkers

[GreenSock 8,117 Likes (Superhero)]

Good catch guys! Sorry about the defaultTransformPerspective thing. It'll be fixed in the next release. 

[Stephane Demotte 0 Likes (Newbie)]

yosh !

 

Any news about this issue ?

 

translateZ still not working on firefox.

[Diaco 1,948 Likes (Superhero)]

Hi Stephane Demotte 

 

translateZ works correctly in FF , pls provide a Codepen Demo of your problem

[Jonathan 5,176 Likes (Superhero)]

I just tested in latest Firefox on Windows 7 ((64-bit) . and translateZ works.

 

Just a side note.. anytime you you want to use translateZ or the z-axis in translate3d() (z property in GSAP) .. you must use either perspective on the elements parent you want the perspective on. Or use transform() perspective on the element itself.

 

Also some browsers have bugs in them where you might also need to use transform-style:preserve-3d on the element with translateZ.

 

But if possible like Diaco.AW advised, if you could please provide a codepen demo. Here is a video tut by GreenSock on how to create a codepen demo.

 

Thanks!