Jump to content
Search Community

Firefox GSAP — JPGs scale jaggedly while linked SVG elements do not rotate with rotationX (Or Y)

PonyBoy test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello GSAPers 🥰

 

First... Happy New Year! I'm usually able to find solutions quite quickly using these forums — Thank you to everyone for always posting useful questions and solutions... the info I find in these forums is a big part of why I'll continue to be a member of Club Greensock.

 

Please refer to my codepen.

 

My main issue: All my JPGs scale jaggedly only in Firefox (Chrome and Safari seem fine). I've tried using GSAP's 'scale' parameter and also combining 'scaleX' and 'scaleY' to no avail.

 

My sub issue: Linked SVG files unexpectedly 'scale' (oddly enough... nice and cleanly :) ) instead of rotating on any requested 3D access (using rotationX or rotationY).  However, I believe I have a solution to my 'sub' issue (but would love any guidance / suggestions if there is a better solution or if I'm incorrect for that matter!). If you look at the first four animated lines of text in the HTML you'll see they're a part of an embedded / masked svg element. They rotate on the 3D access just fine which tells me I need to embed all my SVG and not link to it. Please note: This issue is also only occurring in Firefox.

 

Thank you in advance for any guidance!

See the Pen yLaQZMX by Kevin-Ross (@Kevin-Ross) on CodePen

Link to comment
Share on other sites

Hey PonyBoy. 

11 hours ago, PonyBoy said:

All my JPGs scale jaggedly only in Firefox

That's Firefox rendering issue. How do you expect us to be able to help fix it? I'd search the web for similar issues to try and find a workaround for your case. It's definitely not a GSAP issue :) Let us know if we can help with any GSAP-related questions that you have.

Link to comment
Share on other sites

  • Solution

Like Zach said, it's totally unrelated to GSAP. It looks like Firefox is trying to "optimize" things by doing pixel snapping when the element has no rotation/skew. 

 

If you apply even the smallest amount of rotation, it seems to resolve things because it forces Firefox's rendering algorithms not to pixel-snap. So maybe try setting a rotation of 0.1 to things. 

 

Does that help? 

  • Like 2
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...