Jump to content
Search Community

Performance difference between Chrome & Firefox

Acccent 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 everyone,

 

This is one of those cases where I can't make a reduced test case on codepen because I can't identify the problem, or even if there is a problem at all. So, first of all, I just wanna be clear that I don't expect anyone to really dive deep into this, I'm only asking in case a solution jumps out naturally!

 

I'm almost done with a new website which you can see here: https://gamesforfriends.club (even though the site says to share it with everyone, please don't yet! it will soon be ready, but it's not 100% there yet.)

 

One Chrome, you can click on the button below the info section to smoothly transition to the filters. Similarly, if you click on a button, a modal opens, it's all very smooth (at least it is on my machine, but it's just a modest laptop). I'm on Vivaldi, not Chrome per se, but it shouldn't make a difference.

 

Firefox on the other hand really struggles to provide any kind of smooth animation. I used to have the whole website inside a fixed, viewport-sized element to handle scrolling better on iOS, but when I had the FF couldn't cope at all and I sometimes went below 1fps. (Vivaldi had 0 issue.) I since removed all of that, but I wonder if maybe there's a remnant of that structure somewhere that's causing the lag/stutter. Should I add weird hacks like backface-visibility: hidden; or perspective: 1000? Should I use will-change and try not to think about what an awful property it is? Is Firefox just simply not very good at animating stuff?

 

If anyone had to face similar issues before and found a way out, I'd love to hear about it :)

Link to comment
Share on other sites

I noticed some lag on the filters/info transition everything else is smooth on Firefox(I always use Firefox so it is smooth as per Firefox's standards :D ). But I have seen smooth transitions where elements animate and grow in size so it should be fixable. My PC specs are below average i5 and  Gigabyte GT740.

  • Like 1
Link to comment
Share on other sites

It wasn't horrible for me in Firefox, but I wouldn't call it exactly "smooth" either. Performance optimization is such a deep topic, and can take many hours to really troubleshoot on a live site. I wish I had more time to devote, but here are a few thoughts:

  1. I noticed you had some CSS transitions applied. Be VERY careful about mixing CSS transitions/animations and JavaScript (GSAP) animations on the same elements. You don't want them fighting for control. They'll definitely conflict and at least throw the timing off (and hurt performance). 
  2. Firefox is not known for its animation performance, especially with SVGs. 
  3. Filters SUCK from a performance standpoint. 
  4. Yes, I would recommend experimenting with will-change if you're having trouble. It may very well help in certain situations. Just be careful: https://greensock.com/will-change.
  5. When you're testing performance, keep in mind that if you've got DevTools open, it'll typically make things much slower because it's recording (and exposing) a bunch of extra data. 
  6. Certain fonts can be much more difficult to render, so maybe try experimenting with more basic/common fonts to see if it helps things.
  7. Using percent-based values can be a bit more costly (at least I think) because it forces the browser to keep doing those calculations.
  8. Yes, I'd try setting force3D:true on those tweens just to see if it helps. Might not. Worth a shot. 

I hope that at least one of these things helps nudge you in a good direction. Good luck with the project. 

  • Like 2
Link to comment
Share on other sites

After testing some things out, it looks like the main factor is that the filters section has lots of SVGs, which are all from FontAwesome... unfortunately that's not really trivial to change. I guess I could create PNGs but it's a bit of a hassle, I don't know if I want to spend that kind of time on this project still! It's already late...

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