放大/缩小 chrome 浏览器时变换的意外/不正确的缩放大小：缩放“答案

【问题标题】：Unexpected/Incorrect scale size for transform: scale" when zoom in/out chrome browser放大/缩小 chrome 浏览器时变换的意外/不正确的缩放大小：缩放“
【发布时间】：2019-02-09 01:05:13
【问题描述】：

不正确的缩放大小发生在 Webkit 浏览器中，即 Chrome、Safari。我使用的 Chrome 版本是 68。

演示：Codepen Link

@Kaiido 要求的代码

HTML：

<div class="test1"></div>
<div class="test2"></div>

CSS：

.test1 {
  z-index: 100;
  position: fixed;
  top: 10px; 
  left: 10px;
  width: 1px; 
  height: 1px;
  background: blue;
  transform-origin: top left;
  transform: scale(100, 100);
}

.test2 {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100px; 
  height: 100px;
  background: red;
}

在上面的链接中，如果您放大/缩小 chrome，您会看到比例大小不一定与 .test2 div 的固定大小匹配。我希望scale(100, 100) 的最终大小在缩放时与width:100px; height: 100px 的大小完全相同，但显然情况并非如此。

我也在retina mac 和pc 上测试过这个。这与 Chrome 中的行为相同。但是，相同的代码在 Firefox 中经过测试并且可以正常工作。

这是某种错误还是我遗漏了什么？谢谢。

【问题讨论】：

请将您的示例包含在问题本身中。

标签： css google-chrome css-transforms scaletransform

【解决方案1】：

在移动 Chrome 上发现了类似的案例。在〜100px结果之后通过CSS变换将1px值缩放到某个宽度变得完全错误并且随着继续变得更糟。在我的例子中，这是一个基于 js 的范围控件，我通过变换将其“进度”视觉部分从 1px（基础）缩放到当前用户 touchX 位置：scaleX(touchX);

我对问题的看法是基于对 CSS 单元评估 (https://webplatform.github.io/docs/tutorials/understanding-css-units/) 的理解：在具有小数 window.devicePixelRatio 的屏幕上，有一种急切的整数方程用于抗锯齿。 Android 通常有 2.3、2.6 的 DPR，当用户更改显示的缩放系统设置时，它可能会发生变化。

我的解决方案涉及 javascript，因此可能不适合您，但仍然可能有用：

fixedWidth = (devicePixelRatio * originalWidth) / Math.round(devicePixelRatio);

【讨论】：

【解决方案2】：

这是一个错误...由这些浏览器舍入坐标以避免抗锯齿的事实引起。

因此，当您将缩放级别设置为 120% 时，小方块实际上应该在变换之前呈现为 1.2px*1.2px 的正方形。

但是 webkit 浏览器会将此值四舍五入到 1px，甚至在它们应用转换之前（我认为 FF 也可以，但可能在转换之后）。

所以在缩放 150% 之前您不会看到变化，现在它会四舍五入到 2 像素，而您的蓝色方块将变得大于相同的 100 像素*100 像素。

只有在 200% 时，它们才会再次匹配。

除了让他们知道并避免使用这么小的元素外，无需做太多的事情；-)（使用 10px*10px 正方形并将变换缩放级别除以 10 可以防止此错误）。

【讨论】：

太棒了。感谢您的洞察力！