Chrome中CSS cursor悬停链接时抖动异常，如何解决？

我之前帮好几个开发者排查过这个问题，Chrome在处理自定义光标和默认光标切换时确实容易出现这种抖动的小bug，大概率是浏览器在hover瞬间先渲染默认pointer光标，再加载/切换到你的自定义光标导致的视觉闪烁，尤其是当自定义光标文件有加载延迟或者尺寸不符合标准时，这个现象会更明显。

下面是几个实测有效的解决办法，按优先级排序：

1. 统一所有状态下的光标，避免切换 #

最直接的方法是让<a>标签在默认状态下就使用自定义光标，而不是只在hover时才切换。这样hover时只有颜色变化，没有光标类型的切换，自然就不会抖动了。修改你的SASS代码：

body { 
  cursor: url(../images/cursor.png), auto; 
  a { 
    color: grey; 
    text-decoration: none;
    /* 默认就用自定义光标，hover时不再切换 */
    cursor: url(../images/cursor.png), pointer; 
    &:hover { 
      color: black; 
    } 
  } 
}

2. 提前预加载自定义光标图片 #

如果必须保留默认状态的光标，那就要确保自定义光标图片在hover前已经加载完成，避免hover时才触发加载导致的延迟抖动。可以用CSS的隐性预加载技巧：

/* 在页面加载时就预加载光标图片，不影响页面布局 */
body::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  background: url(../images/cursor.png) no-repeat;
}

这个方法会让浏览器在加载页面时就把光标图片缓存起来，当hover时直接调用缓存里的图片，不会有加载延迟。

3. 检查自定义光标图片的尺寸 #

Chrome对自定义光标的尺寸有严格限制，推荐使用32x32px的图片（这是大多数浏览器支持的标准尺寸）。如果你的光标图片尺寸过大，浏览器会自动缩放它，这个缩放过程可能导致视觉上的抖动。把图片调整到标准尺寸后，抖动现象通常会消失。

4. 禁用Chrome硬件加速（最后手段） #

如果上面的方法都无效，可以尝试关闭Chrome的硬件加速功能，有些情况下硬件加速会导致光标渲染异常：

• 打开Chrome设置 → 系统 → 取消勾选「使用硬件加速（如果可用）」
• 重启Chrome后再测试

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