转换的缩放比例意外/不正确：缩放“放大/缩小Chrome浏览器时的缩放比例

Question

Webkit浏览器中出现了不正确的缩放大小，即Chrome，Safari。我使用的Chrome版本是68。

但是：ぁzxswい

代码由@Kaiido提出

HTML：

Codepen Link

CSS：

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

在上面的链接中，如果放大/缩小chrome，您会看到缩放尺寸不一定与

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

div的固定大小相匹配。我希望.test2的最终尺寸与scale(100, 100)在缩放时的最终尺寸完全相同，但显然事实并非如此。

我也在视网膜mac和pc中测试了这个。这与Chrome中的行为相同。但是，在Firefox中测试相同的代码并且工作正常。

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

Answer 1

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

因此，当您将缩放级别设置为120％时，小方块实际上应该呈现为1.2px * 1.2px平方先前变换。

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

所以你不会看到变化，直到你变焦150％，现在它将四舍五入到2px，你的蓝色方块将比同样的100px * 100px更大。

只有200％才会再次匹配。

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