Web应用中自定义光标在自定义图像与默认箭头间闪烁问题求助

我正在开发一款类似经典《打鸭子》的Web游戏（基于HTML、CSS、JavaScript），需要在整个文档的body上使用十字准星样式的自定义光标。但无论怎么调整，光标都会间歇性变回默认箭头，尤其是快速移动时问题格外明显。我试过PNG和SVG格式的图像，调整过64x64、32x32的尺寸，问题依旧存在。

我使用的CSS代码如下：

body, html { cursor: url(<image path>); }

已尝试的解决步骤：

• 确认光标图像尺寸在多数浏览器支持的128x128像素限制范围内
• 使用PNG/SVG格式并针对Web优化，还通过<link rel="preload" href=<image path> as="image">预加载图像
• 反复检查文件路径无误
• 在Google Chrome、Safari等多款浏览器中测试

目前问题仍未解决，快速移动光标时偶尔会闪烁回默认箭头，严重影响游戏体验，恳请可行的解决方案。

可行解决方案 #

1. 添加上默认光标 fallback #

浏览器在自定义光标加载失败或渲染不及时时，会自动 fallback 到默认光标。明确指定一个备用光标（比如原生十字准星crosshair），能避免跳回箭头，保持视觉连贯：

body, html {
  cursor: url('crosshair.png'), crosshair;
}

2. 优化光标渲染性能 #

快速移动时浏览器可能来不及处理自定义图像光标，试试这些优化手段：

• 使用单色PNG或**更小尺寸（如16x16）**的图像，降低浏览器渲染负担
• 将光标图像转成base64嵌入CSS，彻底消除网络加载延迟：

  body, html {
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5gMVESkqQzkWSwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDg43O7q8cIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQ4y2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII='), crosshair;
  }
  

  上述base64是一个简易十字准星，可替换为自己图像转base64后的内容。

3. 调整浏览器硬件加速设置 #

部分场景下，浏览器硬件加速会导致光标渲染异常，可尝试调整：

body, html {
  backface-visibility: hidden;
  perspective: 1000px;
}

如果无效，也可以尝试开启硬件加速：transform: translateZ(0);，视浏览器表现选择合适的配置。

4. 用JavaScript模拟自定义光标（终极方案） #

如果CSS光标始终存在问题，可完全通过JS模拟光标，彻底规避浏览器原生光标问题：

• 隐藏原生光标：

  body { cursor: none; }
  #custom-cursor {
    position: fixed;
    width: 32px;
    height: 32px;
    background: url('crosshair.png') center no-repeat;
    pointer-events: none; /* 不干扰页面交互 */
    z-index: 9999;
  }
  

• 添加光标元素并通过JS控制位置：

  <div id="custom-cursor"></div>
  

  const cursor = document.getElementById('custom-cursor');
  document.addEventListener('mousemove', (e) => {
    cursor.style.left = `${e.clientX - 16}px`;
    cursor.style.top = `${e.clientY - 16}px`;
  });
  

  这种方式完全由JS控制，不会出现原生光标闪烁的问题，适配游戏场景需求。

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