Share Posted November 6, 2017 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. Link to comment Share on other sites More sharing options...
Share Posted November 6, 2017 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? 6 Link to comment Share on other sites More sharing options...
Author Share Posted November 6, 2017 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. 4 Link to comment Share on other sites More sharing options...
Share Posted November 6, 2017 Excellent, thanks for reporting back. Happy tweening! Link to comment Share on other sites More sharing options...
Share Posted November 6, 2017 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! 6 Link to comment Share on other sites More sharing options...
Author Share Posted November 6, 2017 Thank you also Jonathan for these explanations, it seems clear to me 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now