3d transform not working in Firefox

[agvtt77_0x066fda]

Hi there,

 

I can't get rotationY to work on an svg in firefox. I've attached my codepen url. I'm trying to rotate the propeller on the submarine.

 

Works fine in chrome. I've tried adding perspective to parent elements as suggested in other posts. Tried disabling gsap and doing it via css and this seemed to work ok.

 

Any help would be much appreciated.

 

Cheers

Dean

 

EDIT: doesn't appear to be working on IE11 either (tested only with virtualbox)

See the Pen KpozjM by meandillar (@meandillar) on CodePen

[OSUblake]

Looks like it might be a bug. I just changed the GSAP version to 1.16.0 and it started working.

 

See the Pen vOjbgZ by osublake (@osublake) on CodePen

[GreenSock]

Nope, not a bug. The SVG spec doesn't support 3D. The only reason the older version of GSAP appeared to work was because it was using CSS transforms instead of the transform attribute but the problem with that is there are several browser rendering bugs in various scenarios. In fact, we discovered that it wasn't just Firefox - Safari had several odd issues too. Weird ones, like if you tweened the opacity of an SVG element that also had css transforms, then z-index compositing got funky. So we switched to defaulting to using the official SVG "transform" attribute instead of using CSS transforms which delivered much more consistent behavior across browsers. 

 

So again, it's not a bug in GSAP - the SVG spec itself doesn't support 3D so I wouldn't recommend trying that. I wish I had better news for you. 

[Diaco]

in your case , with scaleY you can have exactly same result  : 

See the Pen rVvPqx by MAW (@MAW) on CodePen

[OSUblake]

Interesting. I did not know that.

 

I never tried to do 3D transforms, but I thought it was possible because I've seen it done before. I went back and looked at those examples in Firefox and IE, and they are definitely broken, like this isoscape.

 

See the Pen BinLh by sdras (@sdras) on CodePen

[Diaco]

blake , pls check html structure , there's separate svg tag for each face/polygon .

we have 3d limitation with SVG child elements .

[agvtt77_0x066fda]

Ok, thanks for all the info. I'll use scaleY in this case as suggested by Diaco. Cheers and much appreciated!