CSS缩放比例低于0.5时平移过度，高于0.5时正常的问题排查与解决咨询

我正在用JavaScript实现一个iframe的平移缩放功能，当缩放比例高于50%（也就是scale>0.5）的时候一切正常，但一旦缩小到50%以下，平移就会出现“过度移动”的问题——内容跟着鼠标移动的距离比预期远很多。

下面是我当前更新平移位置的实现代码：

let translateX = 0;
let translateY = 0;
let scale = 100;
let isPanning = false;
let lastMouseX = 0;
let lastMouseY = 0;

function updatePanning(x, y) {
  if (!isPanning) return;
  
  const scaleValue = scale / 100; // scale是百分比数值（比如50对应0.5）
  const deltaX = x - lastMouseX;
  const deltaY = y - lastMouseY;
  
  // 这段代码在scaleValue > 0.5时正常，但scaleValue < 0.5时会过度平移
  translateX = translateX + deltaX / scaleValue;
  translateY = translateY + deltaY / scaleValue;
  
  lastMouseX = x;
  lastMouseY = y;
  
  applyTransform();
}

function applyTransform() {
  const scaleValue = scale / 100;
  wrapper.style.transform = `scale(${scaleValue}) translate(${translateX}px, ${translateY}px)`;
}

我用CSS的transform属性结合scale和translate来实现效果，平移计算的时候是把鼠标移动的差值除以当前缩放比例，用来抵消缩放带来的影响。

为什么这个方法在缩放比例高于0.5时能正常工作，低于0.5就会导致过度平移呢？有没有适合低缩放比例的坐标转换公式可以替代？

我做了个可测试的demo：滚动鼠标滚轮缩放，左键按住拖动平移。如果有人能给出让平移在所有缩放级别都保持一致的思路，我会非常感激。

备注：内容来源于stack exchange，提问作者Islam Mohamed