SVG scaled on mozilla gives an ugly display

[hh23]

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:

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:

 

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.

[GreenSock]

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? 

[hh23]

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.

[GreenSock]

Excellent, thanks for reporting back. 

 

Happy tweening!

[Jonathan]

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!

 

 

[hh23]

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