高分辨率下网页无限网格鼠标拖动滞后问题求助

实现原理 #

我搭建的无限网格网站，核心实现逻辑如下：

• 网格元素设置为position: absolute，通过动态修改top和left CSS属性控制位置
• 背景线条使用background-position属性实现偏移
• 鼠标移动的响应逻辑通过requestAnimationFrame驱动，按住右键拖动鼠标即可移动网格

遇到的问题 #

该功能在1080p分辨率下运行流畅，但切换到1440p分辨率后，网格移动会出现明显滞后。这并非单纯FPS下降导致（1440p下FPS确实低于1080p），而是鼠标移动操作后，网格要延迟约0.5秒才会响应移动，恳请各位提供解决思路。

网格为带有规则线条的无限平面网格，可在我的测试页面体验：按住右键快速拖动鼠标即可触发网格移动。

已尝试的解决方案 #

• 曾误以为是244Hz高刷新率屏幕导致的问题，添加了60FPS节流处理，无任何改善
• 尝试使用CSS属性will-change和transform: translateZ(0)触发硬件加速，未取得效果

硬件配置 #

我的硬件性能应该不存在瓶颈：

• 处理器：Ryzen 9 7945HX（最高可达5.4GHz）
• 显卡：RTX4080（笔记本版本）

内容的提问来源于stack exchange，提问作者Herobrine