Jump to content
Search Community

CSS 3D Transforms not working in Firefox

peterPotter test
Moderator Tag

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,

 

As noted in the subject, CSS 3D Transforms are not working in Firefox. The transformation has no 3D depth in Firefox. Firefox makes my beautiful 3D transformation (rotationY) looks like a lousy, 90s 2D slide.

 

Note that the animations work wonderfully in Safari and Chrome. I am using the latest versions of all 3 browsers to test. And I am animating with TimelineMax. I am on a MacBook Pro.

 

 

 

 

 

Link to comment
Share on other sites

Hmm, Using FireFox 21 on a Mac I tested all of these:

 

See the Pen 9f62ebc0d3feb0135be3c5407e58e0d9 by GreenSock (@GreenSock) on CodePen

See the Pen 2a85dcafee6ead8a04e19152f6439f77 by GreenSock (@GreenSock) on CodePen

 

See the Pen yzahJ by GreenSock (@GreenSock) on CodePen

See the Pen mscjD by GreenSock (@GreenSock) on CodePen

See the Pen yelzn by GreenSock (@GreenSock) on CodePen

 

3D is working fine.

Do these work for you?

Link to comment
Share on other sites

Thanks for the info, Carl. Those links did work correctly in Firefox. 
 
I think I discovered the problem. When I set the perspective on the parent, like this:

tl.set(wrapper, {perspective:500});

It does not work in Firefox.

 

But when I set the perspective on each item individually, like this:

tl.set(box1, {transformPerspective:200});

It works in Firefox.

 

The big problem for me is that changing to the latter way is problematic because I have to change all my animations, including the rotations amount, because when I set the perspective on individually items, the animation changed quit a bit.

 

How can I get the former example (tl.set(wrapper, {perspective:500})

) to work in Firefox?

Link to comment
Share on other sites

Weird, I haven't come across this issue in any of our demos but according to this article, Firefox and IE10 require perspective be set with px

http://stackoverflow.com/questions/15833996/css-perspective-not-working-in-internet-explorer-10-or-firefox

 

Check out this codepen in FF:

See the Pen rGqJs by GreenSock (@GreenSock) on CodePen

 

Seems to work if you do

TweenLite.set("ul", {perspective:'800px'}); //notice quotes and px

let us know if that solves your problems. 

 

perhaps we can add 'px' behind the scenes.

Link to comment
Share on other sites

Cancel that last post. CSSPlugin should automatically add the 'px'. And in fact you shouldn't need the quotes or the px (i updated the codepen and it works as expected in Firefox without 'px').

 

Can you make a small example of the issue you are facing? If you use codepen that would be best. Just fork the example above.

Link to comment
Share on other sites

I found the problem: On Firefox, you have to set the perspective on the immediate parent of the div that will be transformed. I had the perspective on the parent's parent. It is now working fine on Firefox, after I set the perspective on the immediate parent of the div.

 

But I have another weird problem (which I just fixed). This time it is on Chrome. When the transformed div has a background color (any color) and visibility set to hidden, the div is shown as a black box just before the animation starts. If I remove the background color or remove visibility:hidden, the problem goes away.

 

I solved the problem by using opacity:0 instead of visibility:hidden.

 

You can try it yourself, hide the div first (visibility:hidden and a background color in the css), then do the transformation. On Chrome only, you will see there is a black box quickly before the animation starts. The black box disappears once the animations starts—I presumed once visibility:hidden is removed that is when the black box goes away.

 

Thanks for all your help. I am good now.

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...