Jump to content
GreenSock

themepunch

Scale, Rotate and Fade in FF with strange Effect

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

Hi,

 

i just made a small test here: http://jsfiddle.net/VxvsS/2/ 

 

If you hover on the image you will see two Google Font (Open Sans) rotating, scaling and fading in.  In Chrome, Safari etc.. it works perfect. As soon i check it in FF i see at  the end the Font Weight just jumps and become after the animations clear.

 

Also made an example without google font, and without scale, simple fade and rotate here: http://jsfiddle.net/VxvsS/3/

 

It has something to do with the rgba color of backgrounds and 3d animations, but you may know some tricks which would help for here ? 

 

Thanks,

 

Krisztian

Link to comment
Share on other sites

Hmm I'm testing on PC here, Firefox 25 + 26. I'm not seeing any changes in font weight, but I do noticing the tiniest shift in the text as it swaps back from the 3D transform to standard ClearType text. Is that what you're referring to?

 

You could maybe tween to rotationX:0.0001 which would maintain the 3D layer rendering and avoid the swap back?

  • Like 2
Link to comment
Share on other sites

Hello

 

Why not include your fonts via <link> tag instead of using @import and see if your issue still happens

 

performance issue when using @import and using @import inside link with other styles

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

https://developer.mozilla.org/en-US/docs/Web/CSS/@import

 

Here is your jsfiddle with the Google Web Font css used in a link tag added via the jsfiddle resources option

 

http://jsfiddle.net/VxvsS/4/

 

I am not seeing this issue in Firefox

 

:)

  • Like 1
Link to comment
Share on other sites

Hi,

 

Just added z:0.1 and it worked, wanted to post it but you guys are really quick :) !  Thanks again.

 

Cheers,

 

Krisztian

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