Jump to content
Search Community

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

Jonathan test
Moderator Tag

Go to solution Solved by Rodrigo,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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? :blink:

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

Link to comment
Share on other sites

  • Solution

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.

  • Like 2
Link to comment
Share on other sites

  • 7 months later...

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!

  • 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.
×
×
  • Create New...