Running script on Microsoft Edge has some lag

[monarch]

Hi all,

 

I checked this script and it worked fine on google chrome and firefox but when i checked it on Microsoft edge all grids moving with some delay. 

can you guide me to solve this issue?

 

thanks

 

See the Pen jONBMjd by petebarr (@petebarr) on CodePen

[ZachSaucier]

Hey monarch and welcome to the GreenSock forums! 

 

Browsers handle rendering differently. Some handle certain animations better than others. There's not one fix to make animations work well in a certain browser. In this case, you could try adding will-change: transform; to the .cell CSS. 

 

I'm curious - why are you interested in doing it for this pen? Are you using the above pen in production somewhere? That sort of effect probably should be done in something like WebGL if you're worried about performance or going to use it in production. Pete made that pen just to demonstrate some features in GSAP 3.

[monarch]

3 hours ago, ZachSaucier said:

Hey monarch and welcome to the GreenSock forums! 

 

Browsers handle rendering differently. Some handle certain animations better than others. There's not one fix to make animations work well in a certain browser. In this case, you could try adding will-change: transform; to the .cell CSS. 

 

I'm curious - why are you interested in doing it for this pen? Are you using the above pen in production somewhere? That sort of effect probably should be done in something like WebGL if you're worried about performance or going to use it in production. Pete made that pen just to demonstrate some features in GSAP 3.

Thanks for your reply,

I just wanted to know how we can fixed these kinda of problems if happen in future on my own scripts specially for Microsoft Edge

 

Also i added will-change: transform to the .cell class but problem still remain on Edge. 

[ZachSaucier]

6 minutes ago, monarch said:

I just wanted to know how we can fixed these kinda of problems if happen in future on my own scripts specially for Microsoft Edge

It often depends on exactly what's going on. It's best to use your developer tools to figure out what is causing the issue. 

[monarch]

anybody knows what is the main reason of this lag?