Jump to content
GreenSock

DarwinRobot

GSAP v1.9.1 problems with rotation in Firefox 19.x

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.

 

Firstly, I have to say thanks for a great package - I've been using it in Flash for quite a while and am now using the JS version.

 

My problem is that in FF19.x, elements that I've rotated with the following line disappear once the rotation is complete:

 

TweenMax.to(vObjString, 0.6, { css:{ rotation:-90, transformOrigin:"57px 0px" }, ease:Bounce.easeOut, onStart: mPlaySound, onStartParams: ['flag_lift'] });

 

vObjString is a string list of elements e.g. "a#game_flag_1, a#game_flag_2".

 

Intermittantly they re-appear, some seconds later, but mostly they stay hidden until I use Firebug to toggle a css property eg. overflow:hidden on the containing div. Removing overflow: hidden from the CSS rule and refreshing the page has no effect - they still disappear after rotating - other than showing the previously hidden overflow (!).

 

Everything works properly in Safari, Chrome, IE9 & 10 and it used to work in FF18 and below. I realise that this is most likely something that MOZ have changed in FF19, but I wondered if anyone else has had any similar problems, or has any ideas on a work-around?

 

Thanks v. much.

 

Dale

Link to comment
Share on other sites

Hmmm...sorry to hear about the trouble. I can't seem to reproduce that on my end. Could you post a very simple codepen or jsfiddle or HTML file that demonstrates the issue? I tried Firefox 19.0.2 on Mac and Windows. 

Link to comment
Share on other sites

Thanks for quick response - much appreciated.

 

Yes, it's a bit perplexing. The page it's happening on is quite complex, with data being pulled in from MySQL and lots of other bits happening too. I'm going to try and extract the bit that's now going wrong and make it a standalone file - it may take a while...

 

Just-in-case it's important, I'm using Macs (10.8.3 & 10.6.8) and virtual copies of Windows (XP & 8) and I'm seeing the problem on FF19.x in OSX and Windows.

 

I'll let you know if I can extract everything...

 

Edited to add:

 

Interestingly, changing css:{ rotation:-90, transformOrigin:"57px 0px" } to css:{ left: 0 } makes the elements slide into position and they do not disappear. (the elements, which are <a> tags, start out with left set to -40px).

 

Edited to add:

 

Ah! I seem to have solved the problem by wrapping each anchor tag in it's own div tag and rotating the div instead of the anchor. I've half an idea that I read something somewhere about enclosing anchors in divs when trying to rotate them - but I can't for the life of me remember where! I wonder what changed in FF19?

 

Anyway, thanks v. much Jack for your offer of help.

 

Kind regards,

 

Dale

Edited by DarwinRobot
Link to comment
Share on other sites

Glad to hear you figured it out. I wonder if it had something to do with <a> tags having a display of inline instead of block or position wasn't absolute or relative - some browsers do some funky clipping in those cases (unrelated to GSAP - it's just how they render those styles). Thanks for letting us know about your solution. 

Link to comment
Share on other sites

Yes, I thought about display/position - I tried inline, inline-block and block with no effect. It's also worth noting that they were position: absolute too and setting position to relative, had no effect either, although I didn't try without position...

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