如何解决Safari播放WebAudio时cursor:none失效问题？

问题背景 #

在Mac Ventura 13.2.1 + Safari 16.3环境下，使用WebAudio播放声音时，地址栏会显示扬声器图标，此时页面客户端区域会隐性失去输入焦点，导致cursor:none的CSS规则失效。该过程不会触发visibilitychanged事件，游戏仍正常运行；移动鼠标后光标会再次隐藏，但下一次播放声音时问题会重复出现。尝试过全局、body/html、canvas的cursor:none !important设置均无效，Chrome中无此问题。

解决方案 #

1. 音频播放后强制重置光标样式

利用JS在音频播放完成（或开始）后，主动为目标元素（如游戏canvas）设置cursor属性，覆盖Safari的隐性重置：

// 假设使用AudioContext播放音频
const playSound = () => {
    // 你的WebAudio播放逻辑
    const oscillator = audioContext.createOscillator();
    oscillator.connect(audioContext.destination);
    oscillator.start();
    oscillator.stop(audioContext.currentTime + 0.1);

    // 播放后强制重置光标
    document.querySelector('canvas').style.cursor = 'none';
};

如果是使用HTML5 Audio元素：

const audio = new Audio('game-sound.mp3');
audio.addEventListener('play', () => {
    // 延迟50ms执行，确保Safari完成扬声器图标渲染后的状态重置
    setTimeout(() => {
        document.body.style.cursor = 'none';
    }, 50);
});

2. 增强CSS规则的优先级（辅助）

配合JS的同时，保留高优先级的CSS规则，确保基础状态正确：

html, body, canvas {
    cursor: none !important;
    pointer-events: auto !important;
}

原理说明 #

Safari在显示地址栏扬声器图标时，会内部修改页面元素的光标状态，这个操作不会触发常规的焦点或可见性事件，单纯的CSS规则无法覆盖这种隐性的状态变更。通过JS在音频播放时机主动设置cursor属性，可以强制覆盖Safari的默认行为，恢复光标隐藏状态。

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