Browser repainting is several frames behind on high resolution

I'm building a website with an infinite grid. You can move the grid by holding right click and moving the mouse.

How it works: the grid has a position: absolute and I set the top and left css properties accordingly. For the background lines, I use a background-position property. I'm using requestAnimationFrom on the mouseMove event.

My problem: it works smoothly at 1080p, but the movement lag behind at 1440p. It's not a FPS problem (depite that I have a lower FPS than at 1080p), it's just that if I move my mouse, the grid will move 0.5s behind. Does anyone have an idea how to fix that?

Here's and example of the grid:

If you guys want to see it for yourself, here's a sample: https://luna-park.app/editor (Just hold right click and move the mouse quickely)

I though it was due to my 244Hz screen: I added a throttle to 60FPS, but no change.

I tried the CSS properties will-change and transform: translateZ(0) with no luck...

I don't think it's due to my hardware:

• I have a Ryzen 9 7945HX (that can go up to 5.4Ghz)
• I have a RTX4080 (laptop but still)

FOUND IT! It was actually all due to my grid background wich used a background-image with a lot of linear-gradient functions.

This must be pretty unoptimized, I'll replace it with a canvas.