Slow scrolling and laggy animation on Chrome but near perfect in Safari

[taskade]

Hi everyone,

 

We launched our new website recently, and after extensive optimizations, we still have inconsistent loading and scrolling lag depending on the browser.

After the latest Chrome v104 update, it seems to have gotten worse, but in Safari loads perfectly fine. Testing with Macbook Pro M1.

 

Can anyone point us to the right direction on optimizations? 

 

Site URL: https://www.taskade.com

 

Thanks! 

 

[daniel.mt]

Hey,

 

One thing I noticed is that the sections where you have the filter: blur applied the browser struggles to render it.  I had a similar case in the past ( 1 year ago) and this was due to this filter. You can start by removing it at first and see if this improves

 

The next thing you can do is to remove tweens applied on images especially the transform: scale and opacity. This is a problem I had 1 month ago. Due to transform: scale applied on image using css or gsap caused the image to not render correctly.

 

These all are related to the browser and the only workaround is to replace these.

 

[taskade]

Thank you Daniel, we will give this a try next! 

[Kokku]

I had this same issue except it was the other way around - smooth on Chrome but very laggy on Safari. Solution: wrap all the images in divs and apply GSAP animations to the div instead of the img element. 

[GreenSock]

It's also worth noting that filters are very expensive for browsers to render (not related to GSAP) and I found that setting will-change: transform can really help with performance in some cases. Apply that via CSS to the things you're animating.