Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
hh23

SVG scaled on mozilla gives an ugly display

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,

First of all, thank you to the developers of this very efficient API.

I have a problem only on mozila and a little less under IE. My code scale down the two svgs at the right, from 20 to 4.

The problem looks like that:

mozilla.jpg.8bbc494c1c9a6be3f8d47572a68f6b4d.jpg

In my phone mode version, the scaling value is 4 to 1 and i do not have this problem.

On Chrome, all it's nice and work perfectly, like this:

chrome.jpg.92b2142f889e114786f269cc0b67875b.jpg

 

the project is an animated logo that preloads the home page. The white background disappears after the animation and lets appear the page.

I created a pen here. I try to simplify the code since it comes from the page and changed the logo.

 

See the Pen pdbrvx by grantet (@grantet) on CodePen

I tried the force3D = false but it did not work.
I hope your enlightened experience will solve my problem.

Sorry for my english because I speak essentially french : )
Best regards.

Link to comment
Share on other sites

Very interesting - it looks like this has nothing to do with GSAP but is related to how some browsers "optimize" SVG rendering in certain situations. If you remove the "perspective" that you set on the SVGs, and make autoAlpha go to 0.99 instead of 1 on those same elements, it resolves things (at least in Firefox that I tested it in). So just 2 changes to your code. 

 

Most browsers force anything that's got a 3D-related property set (like perspective, rotationX, rotationY, or z) to get rendered on the GPU, thus it creates a texture for it, often at the original raster size and since you're scaling this up to 20x its normal size, things are getting pixelated when that texture is stretched up. The other odd thing was how the browser decided to totally shift the rendering as soon as its opacity was 1 (but 0.99 was fine). 

 

See the Pen dZXQEo?editors=0010 by anon (@anon) on CodePen

 

Does that help? 

  • Like 6
Link to comment
Share on other sites

Oh, it's great Jack !

Thank you for this quick and very helpful answer.
I would never have thought to adjust the autoAlpha to 0.99, incredible.
On the latest version of firefox, it actually works with your tips.
On IE, you must also disable the css "transform-style: preserve-3d;".

A big thank-you.

  • Like 4
Link to comment
Share on other sites

Excellent, thanks for reporting back. 

 

Happy tweening!

Link to comment
Share on other sites

Hello @hh23 and Welcome to the GreenSock Forum!

 

The reason autoAlpha: 0.99 works is due to how the stacking context works in the browser. That puts the element onto a new stacking layer ;)

 

Please see stacking_context spec


One of the ways an element will get a new stacking context is when an:

 

Quote

Element with a opacity value less than 1 (See the specification for opacity).

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

 

In IE you can just set transform-style to flat ( transform-style: flat )

 

Happy Tweening! :)

 

 

  • Like 6
Link to comment
Share on other sites

Thank you also Jonathan for these explanations, it seems clear to me:)

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

×