Question

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

@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的最终大小完全相同，但是显然不是这种情况。

我也在视网膜Mac和PC上对此进行了测试。这与Chrome中的行为相同。但是，相同的代码已在Firefox中经过测试并且可以正常工作。

这是某种错误还是我错过了一些东西？谢谢。

Answer 1

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

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

但是，即使在进行转换之前，webkit浏览器也会将此值四舍五入到1px（我认为FF也可以，但是可能在转换之后）。

因此，直到缩放150％时，您才会看到更改，现在它将被四舍五入为2px，并且蓝色方块将变得大于相同的100px * 100px。

只有200％的玩家会再次匹配。

要避免这种情况，除了让他们知道并避免使用这样的小元素外，没什么可做的；-）（使用10px * 10px的正方形并将变换缩放级别除以10可以避免此错误）。

Answer 2

在移动 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);

缩放时出现意外/错误的缩放大小：放大/缩小chrome浏览器时出现“ scale”

2 个答案: