捏合缩放导致MouseEvent.clientX/clientY异常的问题求助

当页面通过捏合缩放时，clientX/clientY返回的是缩放后视口的坐标，但position: fixed元素的left/top属性基于原始CSS像素空间计算，两者在缩放后无法直接匹配。这是导致跨浏览器（尤其是Safari）光标位置跳变、移动速度不一致的核心原因。

以下是修复后的代码，可解决所有浏览器中缩放导致的光标定位问题：

修复后的JavaScript #

const cursor = document.querySelector("#cursor");

function updateCursorPosition(e) {
    cursor.style.display = "block";
    // 使用transform定位，自动适配页面缩放比例
    cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
}

// 监听鼠标移动事件
document.addEventListener("mousemove", updateCursorPosition);

// 监听页面缩放/滚动，强制更新光标位置
window.addEventListener("resize", () => {
    const currentRect = cursor.getBoundingClientRect();
    const fakeEvent = {
        clientX: currentRect.left + cursor.offsetWidth / 2,
        clientY: currentRect.top + cursor.offsetHeight / 2
    };
    updateCursorPosition(fakeEvent);
});

window.addEventListener("scroll", () => {
    const currentRect = cursor.getBoundingClientRect();
    const fakeEvent = {
        clientX: currentRect.left + cursor.offsetWidth / 2,
        clientY: currentRect.top + cursor.offsetHeight / 2
    };
    updateCursorPosition(fakeEvent);
});

调整后的CSS #

:root {
    cursor: none;
}

body {
    margin: 0;
}

#cursor {
    pointer-events: none;
    position: fixed;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid black;
    box-sizing: border-box;
    z-index: 9999;
    display: none; /* 默认隐藏，鼠标移动后显示 */
}

关键说明 #

1. 使用transform定位：transform的坐标计算基于当前页面的缩放上下文，能自动适配缩放比例，彻底解决left/top与缩放后坐标空间不匹配的问题，确保光标移动速度与鼠标完全一致。
2. 监听resize/scroll事件：页面缩放（触发resize）或滚动时，通过光标当前位置生成模拟事件，强制更新定位，解决Safari中缩放后坐标跳变的问题。
3. 优化初始状态：默认隐藏光标，避免页面加载时光标出现在错误位置。

Safari专属优化（可选） #

若上述方案仍存在Safari特定问题，可通过计算页面缩放比例修正坐标：

function getPageZoom() {
    // 获取当前页面的缩放因子
    return document.documentElement.getBoundingClientRect().width / document.documentElement.offsetWidth;
}

function updateCursorPosition(e) {
    const zoom = getPageZoom();
    cursor.style.display = "block";
    // 修正缩放后的坐标偏差
    const correctedX = e.clientX / zoom;
    const correctedY = e.clientY / zoom;
    cursor.style.transform = `translate(${correctedX}px, ${correctedY}px) translate(-50%, -50%)`;
}

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