MacOS Firefox与Safari中修改document.title导致cursor从pointer重置为default

问题原因 #

这是MacOS平台下Firefox和Safari的专属行为：当通过document.title修改窗口标题时，浏览器会触发窗口标题栏的UI更新流程，这个过程会干扰页面元素的:hover状态检测逻辑。此时光标虽然仍停留在按钮上，但浏览器不会再识别该元素处于:hover状态，导致cursor: pointer的样式失效，光标变回默认的default，直到光标离开按钮并重新进入，才会重新触发:hover状态。

其他浏览器（如MacOS Chrome、Windows全平台浏览器）没有这个UI更新与元素状态检测的冲突逻辑，所以不会出现该问题。

解决方案 #

方案1：直接给按钮设置默认cursor（推荐） #

不需要依赖:hover伪类，直接为按钮设置全局的cursor: pointer，这样无论hover状态是否被干扰，光标都会保持指针样式：

button {
  cursor: pointer;
}

#plus-one {
  width: 10rem;
  height: 8rem;
}

方案2：手动触发hover状态重绘（适合必须依赖:hover的场景） #

如果一定要保留:hover的写法，可以在修改标题后，通过JS强制浏览器重新识别按钮的hover状态：

var count = 0;

const counter = document.getElementById("counter");
const btn = document.getElementById("plus-one");

btn.addEventListener("click", () => {
  count++;
  counter.innerHTML = count;
  document.title = `Now is ${count}`;
  
  // 强制重绘，触发hover状态重新检测
  if (btn.matches(':hover')) {
    // 先临时修改样式触发重绘
    btn.style.cursor = 'default';
    // 强制浏览器计算布局，触发重绘
    void btn.offsetWidth;
    // 恢复指针样式
    btn.style.cursor = 'pointer';
  }
})

对应的CSS可以保留原写法：

button:hover {
  cursor: pointer;
}

#plus-one {
  width: 10rem;
  height: 8rem;
}

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