Unexpected/Incorrect 变换的缩放大小：缩放“缩放时 in/out chrome 浏览器

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;
}

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

我也在视网膜 mac 和电脑上测试过这个。这与 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 的范围控件，我通过转换将其 'progress' 视觉部分从 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);

Unexpected/Incorrect 变换的缩放大小：缩放“缩放时 in/out chrome 浏览器

Unexpected/Incorrect scale size for transform: scale" when zoom in/out chrome browser

css

google-chrome

scaletransform

css-transforms