Jump to content
Search Community

Is it me or... Firefox?

frivolta test
Moderator Tag

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,

I was wondering, does anyone see lag when playing animations on Firefox?

I made just a few animation so far as I am a "newbie gsap coder", what I have experienced is that those animations are smooth in chrome, safari and IE but they lag a lot in Firefox.

At first I thought I was coding in the wrong way my scripts but then I saw that even the animations in the "Examples" page have the same problem (eg. https://www.reputationsquad.com/).

 

 

What I see is that this doesn't seem a GSAP problem but is like Firefox is having hard times with all kind of animation methods.

 

I tested it both on my macbook pro retina (late 2015)  and on a mac mini, in both cases if I try to open a website like:

http://beta.wind-and-words.com/ (examples page), the fan start working at max power! Like when you render an After Effects animation with all your cores.

 

Do you have the same problem? Do you know any solution or workaround?

 

Thanks guys!

  • Like 1
Link to comment
Share on other sites

Hello frivolta, And Welcome to the GreenSock!

 

Can you please explain in detail what exactly what animations on the page are lagging in Firefox. Like what do we have to do to reproduce what you are seeing. It will probably be best to create a limited codepen example with a couple of tweens showing what you describe. Since it will be hard to debug through all teh code on your website.

 

In Firefox if you are translating in x, y, or z you will need to add a slight rotation like rotation: 0.01 to your tween

 

Here is a video on how to create a reduced codepen demo example so we can test yoru code live:

 

 

Thank you!

  • Like 2
Link to comment
Share on other sites

It was just a general question, as it seems to me that firefox is having hard times rendering animations compared to other browsers. So far I have tested the website in the example section and everything works fine in Safari/Chrome/IE... but when it comes to Firefox animations are not rendered as smooth as other browsers (all kind of animations not just gsap ones), is it a known issue? It happens only to me?

Link to comment
Share on other sites

Hello again frivolta

 

That is why i recommend you add the slight rotation: 0.01 to your tweens that use scale, x, y, or z .. and the jank will disappear. What is happening is a pixel snapping bug in Firefox, but once you add the slight rotation it becomes smooth. Tested and works on Windows 7, Windows 10 and OSX latest Firefox version.

 

When you add the slight rotation that tells the browser to make it render with the GPU which will make the tween use either translate3d() or matrix3d() and then the browser will push those pixels to be drawn on a new rendering layer using hardware acceleration. And in this case will resolve the pixel snapping that cause the jank (lost frames).

 

Also without an example we cant assist you properly since its is very hard to debug an entire website, That is why we ask for a limited codepen with the tween giving you trouble. :)

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

Hi @Jonathan, @PointC, @Carl 

I have found a work around to this Firefox jank problem, but I'm not sure if it's a potentially terrible idea?

 

On a localhost dev site I noticed the animations were very janky in Firefox for the reasons stated above in the thread, because of the nature of the animations, adding the rotation property, although improving things slightly in FireFox, didn't fix things completely (I also have a static rotation on an element being animated so this created other side effects).

 

I noticed however that my Contact Page animations were all silky smooth compared to other pages, and the animations were virtually the same amount of code and with similar transforms / scale values etc?

 

The reason it was animating OK on the Contact Page is because this page is a 100vh single section so everything apart from the footer is above the fold.

 

On my other pages I wrapped the page content below the fold in a wrapper div, and in the JS file I set it to `display: none` for Firefox browser versions, and then used a setTimeOut function that switches it to 'display: block' after the duration of the animation, and hey presto everything animated buttery smooth.

 

Below is the code I used:

 

My main reservations are that:

 

a) when reloading the page it will effectively always return to the top of the page,
b) I'm worried there may be an SEO hit for initially hiding so much content,

c) it just seems like a really terrible idea even though it works really well.

Feel free to chip with any thoughts, I'm not particularly advanced with JS or GSAP, so would appreciate any comments
 

var mainContent = document.getElementById("main-content");
var ff = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;


if ( ff ) {

    mainContent.style.display = "none";

    // SET TIMEOUT ON EVERYTHING BELOW SECTION ONE ON LOAD
  
    window.setTimeout(function() {

        mainContent.style.display = "block";

    },2000)

}

 

 

 

 

Link to comment
Share on other sites

Hi @pauljohnknight

 

Here is a better way to detect if the browser is Firefox, It uses feature detection since using the useragent can be spoofed.

 

var FF = !(window.mozInnerScreenX == null);
if(FF) {
    // is firefox 
} else { 
    // not firefox 
}

 

Be careful with hiding the content like that Google will ding you for hiding content to increase ranking. But you will have to test and see what Google is doing in your case. Google still dings for using high values of text-indent.

 

Do you have a limited codepen demo example? Since it will be hard to even see what your GSAP specific code is doing or what it looks like. Also i noticed you are using canvas on that page, so be careful since canvas can be a resource hog, especially on mobile draining your battery.

 

Happy Tweening!

  • Like 6
Link to comment
Share on other sites

Hi Jonathan,

 

I'll try and set up a simplified example to show the jank. Also, I'm not using canvas, it's all SVG - I think you're referring to the original poster at the top of the thread who was someone else. I was chipping in because I did a search on GSAP jank in Firefox.

 

Many thanks,

 

Paul.

  • Like 1
Link to comment
Share on other sites

Hello

 

This post has the perfect title for my issue.

 

I’m new to GSAP and I have no idea where to begin to debug this issue which only occurs in Firefox.

 

Here is a link to a draft of the project (please don’t share this link): http://zirkon.prolog.work/

Push «Start» to see the animation. It works great in Chrome, Safari and Opera. Sadly it dosen’t work at all in Firefox 61.0.1 (macOS High Sierra 10.13).

 

Error Message: TypeError: d is null TweenMax.min.js:15:23873

 

It seems that something in the TweenMax.min library dosen’t work for Firefox.

 

Thanks,

Daniel

 

 

 

Link to comment
Share on other sites

Sorry to hear about the issue, @Daniel Eytan Schneider. It's very difficult to troubleshoot a live site with minified code - is there any way you could provide a reduced test case in codepen or something? At the very least, using the unminified version of TweenMax would help. We're not aware of any GSAP bugs related to Firefox, but I'm very curious to see what's going on here. I'm traveling at the moment and don't have time to pull everything apart on your site, but a reduced test case would be amazingly helpful. Oh, and it's usually best to start your own thread instead of jumping into an old one.

  • Like 4
Link to comment
Share on other sites

Hello  @Daniel Eytan Schneider and welcome to the GreenSock forum!

 

When i debug your code in Firefox I can see that it throws an error in the file sketch-3.js on line 131.

 

TypeError: d is null

 

TweenLite.set(noodle, { scale: scaleNoodles, transformOrigin: "center center" });

 

It seems that noodle variable might be null or other properties based on that null variable can be throwing other TypeErrors. noodle is declared on line 125, so something is happening with that.

 

var noodle = document.createElementNS("http://www.w3.org/2000/svg", 'path');

 

You might want to insert or append your created SVG element in the DOM before tweening or setting any CSS properties, that might be causing your issue.

 

But unfortunately like @GreenSock Jack advised its very difficult to debug minified code and especially code that is massively long to debug on a live site. You should reduce your code bit by bit, so you can eliminate the problem parts. This way you can narrow down your issue. Firefox is very picky when it comes to creating elements with createElementNS().

 

So try commenting out all your code, and slowly un-comment out different parts so you can find the problem.

 

Happy Tweening :)

 

 

  • Like 5
Link to comment
Share on other sites

Dear Jack and Jonathan. Thanks a lot for the fast respond and the tipps.

 

1 hour ago, Jonathan said:

 

You might want to insert or append your created SVG element in the DOM before tweening or setting any CSS properties, that might be causing your issue.

 

Now I know where to start debugging :) I try that and let you know if I was successfull.

 

15 hours ago, GreenSock said:

Oh, and it's usually best to start your own thread instead of jumping into an old one.

 

Ok good to know. Will do that in the future.

 

All the best from Basel, Switzerland

Daniel

  • Like 1
Link to comment
Share on other sites

  • 1 year later...
On 2/8/2017 at 7:18 PM, Jonathan said:

In Firefox if you are translating in x, y, or z you will need to add a slight rotation like rotation: 0.01 to your tween

 

I know it's been more than 2 years but I've found this issue with Firefox AND Edge so I gave it a try. Adding the rotation: 0.01 trick made Edge silk smooth (great!) but nothing changed when using Firefox (I manually enabled the hardware rendering via config: already).

 

Any  new tricks for 2020? :-D

Link to comment
Share on other sites

1 hour ago, GreenSock said:

@Loque can you provide more details? Ideally a codepen demo would be very helpful. I'm just not entirely sure what your question is or what problem you're seeing. We'd love to help. 

 

Hi!

 

Sorry I was on the go and didn't spend the proper time to support my comment. I've coded a fast Pen for you to replicate the performance issue. I've made 2 versions: one with GSAP, one with CSS animations only.

 

See the Pen yLyapGW by LuBre (@LuBre) on CodePen

 

Chrome = butter-smooth
Firefox = little stutters
Edge = little stutters unless you add "rotation: 0.01" option in tl1

 

And here's the same-exact animation without GSAP (css animations only). It doesn't run as butter-smooth as GSAP but it runs perfectly fine across all browsers (link removed to avoid double-codepen issues here on the forum).

 

codepen.io/LuBre/pen/GRgjyEm

 

What do you think about this stuff? Let's dig into it, I love GSAP and I want to explore all the possible avenues :-)

 

### EDIT ###

 

I've reduced the code to the most simple thing ever. No images, no fading, just the text translation. It still doesn't run smooth on Firefox/IE:

 

codepen.io/LuBre/pen/PowGQby

  • Like 1
Link to comment
Share on other sites

Yeah, this is just pixel-snapping that Firefox applies for some reason during rendering (totally unrelated to GSAP). The CSS-only version looks identical to me (stutters in Firefox).

 

The key to knocking it off that pixel-snapping algorithm is to rotate it or skew it slightly so that the element's pixels no longer align with the grid of screen pixels. There's some threshold below which Firefox says "eh, it's close enough so we'll just snap pixels". Apparently rotation:0.01 doesn't hit that threshold but rotation:0.1 does. Or it also seems to work if you do skewX:0.01 (or greater). So you could just gsap.set() that element's rotation or skewX to a small amount (enough to knock Firefox off its pixel-snapping habit). 

 

Does that help? 

  • Like 3
Link to comment
Share on other sites

29 minutes ago, GreenSock said:

Apparently rotation:0.01 doesn't hit that threshold but rotation:0.1 does. Or it also seems to work if you do skewX:0.01 (or greater). So you could just gsap.set() that element's rotation or skewX to a small amount (enough to knock Firefox off its pixel-snapping habit). 

 

Weird, even skewing or rotating the element I don't see any change in Firefox. It works with Edge though. Thanks for the feedback, I'll us it as the official answer if a client asks me about Firefox :-)

Link to comment
Share on other sites

Hm, I'm curious what Firefox you're on, and what platform? I'm on a Mac with the latest Firefox. I see no pixel snapping when I apply the advice above. Do you have a codepen link with the advice applied, but still doesn't look right in Firefox? And did you try larger values, even something like rotation:1 or 2? 

Link to comment
Share on other sites

3 hours ago, GreenSock said:

Hm, I'm curious what Firefox you're on, and what platform? I'm on a Mac with the latest Firefox. I see no pixel snapping when I apply the advice above. Do you have a codepen link with the advice applied, but still doesn't look right in Firefox? And did you try larger values, even something like rotation:1 or 2? 

 

Here you go, my rotation test with rotation: 10

 

See the Pen YzPGLrp by LuBre (@LuBre) on CodePen

 

It's even worse now (more noticeable) on Firefox. I'm on PC/Windows 10 with the latest Firefox version installed today on this machine (71.0). I've also enabled hardware acceleration in the Firefox console but nothing changed. Edge works fine though.

 

Testing it on my office PC (via AnyDesk) I see the same issue: Firefox stutters, Chrome/Edge are butter-smooth.

  • Like 1
Link to comment
Share on other sites

Hm, strange - I just tried on Windows 10 in the latest Firefox and it looked smooth (no pixel snapping that I noticed). Not quite sure what to tell ya. I wonder if it's a graphics card driver thing? But if that were the case, I'd think it'd happen in all the browsers. Maybe someone else can chime in and let us know if they see pixel snapping on their machine. 

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