Latest Firefox for Windows breaks rendering.

[emmanuelulloa 31 Likes (Newbie)]

When checking this simple animation in the latest Firefox Windows I'm seeing a lot of "jaggies" in the images.

Anybody experiencing something like that?

See the Pen MGdWKE?editors=0010 by emmanuelulloa (@emmanuelulloa) on CodePen

[emmanuelulloa 31 Likes (Newbie)]

Attached is how it renders the animation.

[GreenSock 8,117 Likes (Superhero)]

I haven't noticed anything like that. We really try to keep these forums focused on GSAP-specific questions. Got one of those? Looks like you're using only CSS transitions in that codepen. You're fired

[OSUblake 9,990 Likes (Superhero)]

I used to have problems like that. Updating my graphics driver fixed the problem.

[emmanuelulloa 31 Likes (Newbie)]

2 hours ago, GreenSock said:

I haven't noticed anything like that. We really try to keep these forums focused on GSAP-specific questions. Got one of those? Looks like you're using only CSS transitions in that codepen. You're fired

Sorry Jack.  I tried to do it with CSS just to confirm that GSAP was not the issue and it was more related to the FF rendering engine. It is for a client with is own CDN and since I cannot bring in GSAP anyways I had to do it with CSS to stay within my 150 kb limit.

[GreenSock 8,117 Likes (Superhero)]

I suppose you're forgiven, @emmanuelulloa

 

Did you know that GSAP is whitelisted on EVERY major ad network? So its file size doesn't count against you. We went to bat for ad developers years ago and all the ad networks recognized that GSAP is kind of a defacto standard in the industry, so they saw the value of whitelisting it. We explained why that was so important here: 

 

https://greensock.com/kilobyte-conundrum/

https://greensock.com/html5-banners

 

Hopefully your client sees the value as well and will offer GSAP on their CDN without counting file size against you. Refer them to those articles if they push back

 

Cheers!

[emmanuelulloa 31 Likes (Newbie)]

Just in case changing from <img> to <div> with background-image fixes the issue.  Apparently rendering of combined images (one on top of the other) is treated differently by the engine.