css - 转换 : scale"when zoom in/out chrome browser 的意外/不正确缩放大小

Question

不正确的缩放尺寸发生在 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 中进行了测试并且工作正常。

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

Answer 1

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

因此，当您将缩放级别设置为 120% 时，小方 block 实际上应该渲染为 1.2px*1.2px 方 block 先验变换。

但 webkit 浏览器会将此值四舍五入为 1px，甚至在应用转换之前(我认为 FF 也会这样做，但可能在转换之后)。

因此，在缩放到 150% 之前，您不会看到任何变化，现在它将四舍五入到 2px，并且您的蓝色方 block 将变得比相同的 100px*100px 更大。

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

除了让他们知道并避免使用如此小的元素之外，没有什么可以避免的；-)(使用 10px*10px 正方形并将变换缩放级别除以 10 可以防止此错误)。