Jump to content
GreenSock

martis

Firefox 35 problems?

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

Hi guys,

 

Wanted to see if anyone else had experienced HUGE render issues on animations on the new Firefox 35?

 

Tried upgrading to latest GSAP and still the issue remains.

 

I can post some examples later, but wanted to take a quick poll.

 

Thanks,

 

James

Link to comment
Share on other sites

Hi martis :)

 

​i can't see any render issues on FireFox 35.0 ( Win7 / 8 ) , pls make a Codepen demo available to find the mentioned issues .

Link to comment
Share on other sites

hmm, I just went through bunch of our own demos and everything looked solid. 

Then I found this: http://codepen.io/gordonnl/full/byouf/and there are certainly rendering issues.

 

here is a screen capture of how FireFox 35 on Mac displayed it:

http://prntscr.com/5smliw

 

UGH. Its clearly not a problem with images loading, it looks like some sort of bizarre compositor failure.

FWIW it happened on my first visit of that page, but when I went back to get the screenshot I had to refresh a lot of times in order for it to happen again.

 

 

Not the best example though to troubleshoot. If you have anything basic you can find please let us know.

Very clearly a FireFox issue and not a GSAP issue, however a reduced test case may help us figure out what scenarios trigger it. 

I have to imagine the FF team will be getting some bug reports

  • Like 1
Link to comment
Share on other sites

Carl,

 

I am also experiencing very similar image flashing/masking on my end as well.

 

This seems to be a Firefox 35 MAC only issue (PC is testing fine).

 

I am in the middle of a build and don't really have time to recreate the scenario, but the common thread of the issue seems to be multiple PNG images animating on top of each other.

Link to comment
Share on other sites

Just wanted to check back in and see if anyone else was having problems with animating layered PNGs in the new Firefox 35 on Mac?

Link to comment
Share on other sites

I have also noticed the issue. It seems to be some kind of redraw issue. I've found reducing the amount of layered PNGs used and adding a setTimeout to initiate the animation helped correct the issue for the time being.

Link to comment
Share on other sites

Thanks Vonscriptor,

 

I will give that a shot, I sadly cannot reduce the amount of PNGs... The animation is in a timeline that plays out based on user interaction so can't really have a setTimeout either.

 

This is really dissapointing as anyone using Firefox 35 on Mac will have a horrible experience on the site. :(

Link to comment
Share on other sites

This looks like a new Firefox 35 Mac PNG bug.. not GSAP. A ton of Firefox users on the internet are having similar issues with PNG and Firefox 35. See this

 

It is weird because Firefox 35 fixed a lot of bugs but now it seems it has created new bugs on Mac Firefox 35 :(

 

martis, have you tried optimizing your PNG's? .. and reducing the PNG's file size?

 

Do your PNG's have alpha transparency?  If so you can convert your PNG-32 (full alpha transparency) to PNG-8 (index transparency) images. PNG-8 images  are usually 3x smaller in file size than PNG-32.

 

Until Firefox fixes it or someone comes up with a workaround or fix.. you could file a Firefox Bugzilla report here.

 

https://bugzilla.mozilla.org/

 

On a good side note:

The only good thing about the new Firefox update is that CSS Filters are enabled by default. So Firefox 35 now supports CSS Filters. Chrome is not the only game in town, that can use CSS Filters.

 

:)

  • Like 1
Link to comment
Share on other sites

Jonathan,

 

Totally understand this is a FF issue and not a GSAP issue.

 

I do need transparency support in my PNG files. I have optimzied them using tinypng.

 

I am even seeing the issue with embedded fonts vanishing after animating :(

 

Think I am out of luck until they release an update to FF *sigh*

Link to comment
Share on other sites

Have you tried using another PNG that wasn't optimized in tinypng and see if Firefox 35 on Mac still has issues?

 

Do you know if the PNG created is PNG-8 or PNG-32?

 

You can tell it is a PNG-32.. If you open the image in a image editor such as Photoshop, Firefox, or even an online image editor like Pixlr. And then zoom in on the image, and look at the edges of your object in the image. If the pixels have a varying degree of transparency, then it is a PNG-32. But if the object edges are just on and off with no visible transparency .. then it is a PNG-8 or PNG-24 image.

 

i hope the Firefox Dev team fixes this issue ASAP.

Link to comment
Share on other sites

Jonathan,

 

I will give a non optmized PNG a shot, but I really do need to optimize as I have many PNGs and file size is an issue.

 

The PNGs are PNG-32.

Link to comment
Share on other sites

I just tested the Firefox Nightly version and the issue is totally gone. Any idea what this might mean?

  • Like 1
Link to comment
Share on other sites

It means that they will be pushing the fixed version build after discussion, hopefully sometime this week. After they realized there goof up :)

  • Like 1
Link to comment
Share on other sites

Just an FYI...

 

Firefox 35.0.1 was released today and it has seemed to resolved the PNG layering issue to some extent. I still see the issue in a few small cases, but it's MUCH better.

  • 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.
×