scaleX also doing a scaleY in latest Firefox (34.0.05)

[robarnow]

Hey all, so I had this animation close to working, but I'm running into a couple bugs. First off, you'll see the doors on the cages in the latest Firefox flip vertically on scaleX, whereas they do not flip vertically in Safari. They should only transform horizontally. You can see the live page here:

 

http://incitementdesign.com/home2/

 

Thoughts?

 

Also, I"m having trouble with IE adding lots of extra spacing on the sides of the SVG sprites, breaking those animations, so if anyone has any thoughts about that as well, let me know.

 

Thanks,

Rob

 

[Carl]

Yes, I'm seeing that in FF.

Please make a reduced CodePen demo of just the single svg element and tween that is in question.

It makes it much easier for us to troubleshoot, thanks.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

[robarnow]

Sorry about that, here is a CodePen of the issue:

See the Pen ZYOGQE by robarnow (@robarnow) on CodePen

 

Let me know if you can assist, thanks!

[GreenSock]

That is definitely a Firefox bug that has nothing to do with GSAP. You can remove GSAP from the equation and add this to the inline style and see what I mean:

transform: scale(0.2142, 1);

Notice that Firefox messes up the scaleY in that scenario (making it appear much smaller than 1). But if you flip the x portion of the scale to the same thing but negative, the scaleY is corrected. It basically gyrates between handling it correctly and incorrectly at various values/decimals. Unfortunately, I don't think there's anything GSAP can do to alleviate that problem - it's definitely an underlying problem in Firefox itself. 

 

I did notice that if you rotate the actual svg <img> by a tiny amount (well, probably any amount), it seemed to resolve the issue, so for example:

TweenLite.set("#yourSVGimage", {rotation:0.001});

Don't go smaller than 0.001 degree or the small decimal values will drop out in the matrix and you won't actually get any rotation (browsers can't handle super small values due to scientific notation and rounding issues).

 

Again, that needed to be on the <img> itself, not the wrapping <div>. 

[robarnow]

Thanks! Great workaround.