基于Firefox的浏览器为何window.screenX/Y返回值异常？

为什么不同浏览器表现差异大？ #

这是Linux Wayland的安全机制导致的：

• Wayland设计时就限制了应用获取窗口的真实屏幕坐标，避免通过窗口位置泄露用户隐私（比如推断用户正在操作哪个窗口）。
• Chrome采用了自己的Wayland适配层（Ozone/Wayland），会尝试返回近似的窗口坐标，但因为Wayland本身不提供精确值，所以出现了移到左边缘返回-25的异常。
• Firefox和Librewolf严格遵循Wayland的安全规范，默认不暴露真实窗口位置，所以window.screenX/Y始终返回0或固定偏移值，Letterboxing功能不影响这个逻辑——它是针对指纹识别的窗口尺寸伪装，和坐标无关。

修复方案：放弃依赖window.screenX/Y #

由于Wayland的限制，这个API在目标浏览器下无法正常工作，需要换用基于用户交互的相对坐标方案来实现视觉效果：

核心思路 #

监听鼠标拖拽窗口的操作，记录鼠标在窗口内的初始位置，结合鼠标移动的偏移量更新背景的绘制位置，全程不需要依赖窗口的绝对屏幕坐标。

修改后的代码示例 #

HTML

<canvas id="background" width="2240" height="1217"></canvas>

CSS

body {
  margin: 0;
  overflow: hidden;
}
#background {
  position: fixed;
  top: 0;
  left: 0;
}

JavaScript

const canvas = document.getElementById("background");
const context = canvas.getContext("2d");
const bgImage = new Image();
bgImage.src = "https://placehold.co/2240x1217";

// 存储背景的偏移量
let bgOffsetX = 0;
let bgOffsetY = 0;
// 存储鼠标拖拽的初始位置
let startMouseX = 0;
let startMouseY = 0;

// 初始化背景绘制
bgImage.onload = () => {
  drawBackground();
};

// 绘制背景函数
function drawBackground() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(bgImage, bgOffsetX, bgOffsetY, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
}

// 监听鼠标按下事件（假设窗口拖拽区域是整个文档）
document.addEventListener("mousedown", (e) => {
  startMouseX = e.clientX;
  startMouseY = e.clientY;
  // 绑定鼠标移动和松开事件
  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
});

// 鼠标移动时更新背景偏移
function onMouseMove(e) {
  const deltaX = e.clientX - startMouseX;
  const deltaY = e.clientY - startMouseY;
  bgOffsetX -= deltaX;
  bgOffsetY -= deltaY;
  startMouseX = e.clientX;
  startMouseY = e.clientY;
  drawBackground();
}

// 鼠标松开时移除监听
function onMouseUp() {
  document.removeEventListener("mousemove", onMouseMove);
  document.removeEventListener("mouseup", onMouseUp);
}

补充说明 #

如果需要更精确的窗口同步效果，还有两个可选方向：

1. Web Window Controls Overlay API：如果网站作为桌面PWA运行，可以通过这个API获取窗口控制区域，结合相对位置计算，但依赖浏览器对Wayland的支持程度。
2. 切换到X11环境：如果必须使用window.screenX/Y，可以启动浏览器时强制使用X11兼容层（比如Chrome加--ozone-platform=x11，Firefox加MOZ_ENABLE_WAYLAND=0），但会失去Wayland的安全和性能优势。

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