Currently, I'm working on a website that features an infinite grid. Users have the ability to navigate through the grid by simply holding down the right click on their mouse and moving it around.
The technical details: To achieve this functionality, I have utilized the CSS properties position: absolute, top, and left, adjusting them accordingly. For the background lines, I have employed the background-position property. Additionally, I have implemented requestAnimationFrom on the mouseMove event for smooth movement.
The issue I'm facing: While the grid operates smoothly at 1080p resolution, there is a noticeable lag when using a 1440p resolution. This lag is not caused by FPS fluctuations, as the performance remains consistent at both resolutions. Rather, when moving the mouse, there is a delay of approximately 0.5 seconds before the grid responds. I am seeking advice on how to rectify this delay.
Here is a visual representation of the grid: https://i.sstatic.net/lkIdk.png
For those interested in testing the grid themselves, I have provided a demo: (Simply hold right click and move the mouse quickly).
Initially, I suspected that this delay was due to my 244Hz screen refresh rate. Despite implementing a throttle to 60FPS, the issue persisted.
I have also experimented with CSS properties such as will-change and transform: translateZ(0) without any success.
Considering my hardware specifications:
- Ryzen 9 7945HX processor (up to 5.4GHz)
- RTX4080 graphics card (laptop variant)