Serious lag on ios devices

[abeydev]

This animation works smoothly everywhere except on ios devices. I first did it by animating "left", "top", "and height", I was told and read that these properties don't perform too well, so I started using x,y, and scale, and the result is the same on ios devices, super laggy.

See the Pen dyQYVVJ by abeydev (@abeydev) on CodePen

[Cassie]

Hi there - 

 

this will likely be the culprit 👀 

Unfortunately filters are like animation kyrptonite, browsers really struggle rendering them, especially safari. Try removing it and see if it's a bit better.

 

filter: blur(3.8125rem);

 

[Cassie]

If I were you I would make that 'blur' using a transparent png? Might be a little better? Worth a shot!