Chrome 125%缩放时，编程设置background-position出现抖动问题

这个问题我之前也碰到过，根源在于Chrome在非整数倍缩放（比如125%）时，CSS像素和物理像素的映射不是整数比例，加上background-position的渲染机制容易出现精度丢失，最终导致移动时的抖动。下面给你几个针对性的解决方案，按优先级排序：

1. 改用transform: translate()替代background-position（最推荐） #

background-position的修改会触发元素的重绘，而transform是在浏览器的合成层处理，不会触发重排/重绘，而且对亚像素的支持更友好，能完美解决缩放时的抖动问题。

具体实现思路调整一下：

• 把原图作为独立的底层元素，遮罩层放在它上方（遮罩层通过mask或clip-path实现孔洞效果）
• 移动鼠标时，通过transform: translate(-x, -y)来平移底层原图，模拟“透过孔洞看局部”的效果

示例代码：

<div class="view-container">
  <img class="original-img" src="你的原图路径" alt="">
  <div class="mask-layer"></div>
</div>

.view-container {
  position: relative;
  width: 800px;
  height: 600px;
  overflow: hidden;
}
.original-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 开启硬件加速，进一步提升平滑度 */
  will-change: transform;
}
.mask-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  /* 用mask实现圆形孔洞，可按需调整大小 */
  mask: radial-gradient(circle 60px at center, transparent 100%, black 100%);
  /* 让孔洞跟随鼠标移动 */
  mask-position: var(--mouse-x) var(--mouse-y);
  mask-repeat: no-repeat;
}

const mask = document.querySelector('.mask-layer');
const img = document.querySelector('.original-img');
const containerRect = document.querySelector('.view-container').getBoundingClientRect();

mask.addEventListener('mousemove', (e) => {
  // 计算鼠标在容器内的相对位置
  const relX = e.clientX - containerRect.left;
  const relY = e.clientY - containerRect.top;
  
  // 平移原图，反向抵消孔洞的位置（60是孔洞半径，按需修改）
  img.style.transform = `translate(${-relX + 60}px, ${-relY + 60}px)`;
  // 同时更新遮罩孔洞的位置
  mask.style.setProperty('--mouse-x', `${relX}px`);
  mask.style.setProperty('--mouse-y', `${relY}px`);
});

2. 修正background-position的计算精度 #

如果你坚持用原来的background-position方案，需要解决缩放比例导致的精度问题：

• 先获取当前页面的实际缩放比例（Chrome的页面缩放和devicePixelRatio不是一回事）
• 用鼠标坐标除以缩放比例，得到精确的浮点位置，避免浏览器自动取整

示例代码：

function getPageScale() {
  // 计算页面缩放比例
  return document.documentElement.getBoundingClientRect().width / window.innerWidth;
}

const mask = document.querySelector('.your-mask-element');
const holeOffsetX = 30; // 孔洞中心偏移量，按需修改
const holeOffsetY = 30;

mask.addEventListener('mousemove', (e) => {
  const scale = getPageScale();
  // 用缩放比例修正鼠标坐标，保留小数位
  const x = (e.clientX - holeOffsetX) / scale;
  const y = (e.clientY - holeOffsetY) / scale;
  // 直接设置浮点值，不要取整
  mask.style.backgroundPosition = `${x}px ${y}px`;
});

3. 开启硬件加速优化 #

给遮罩元素添加以下CSS属性，强制浏览器将其放入合成层渲染，减少重绘带来的抖动：

.your-mask-element {
  will-change: background-position;
  /* 或者用translateZ(0)触发硬件加速 */
  /* transform: translateZ(0); */
}

为什么125%缩放会出问题？ #

125%是1.25倍缩放，这时候1个CSS像素对应1.25个物理像素，background-position如果用整数像素值，浏览器会在物理像素层面做近似对齐，移动时就会出现跳变；而transform支持亚像素渲染，能平滑过渡这些非整数的像素偏移。

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