转换比例时宽度不一致

Question

为什么下面的两个矩形宽度不同？

第一个是：

1% 宽度
50 倍比例

第二个是：

100% 宽度
.5 倍比例

1 * 50 = 50 和 100 * .5 = 50，不是吗？

body {
  margin: 10px 30px;  
}
#box {
  width: 439px;
  height: 200px;
  border: 1px solid black;
  box-sizing: border-box;
}
.line {
  height: 10px;
  transform-origin: left;
}
#example1 {
  width: 1%;
  transform: scaleX(50);
  background-color: red;
}
#example2 {
  width: 100%;
  transform: scaleX(.5);
  background-color: blue;
}

<div id='box'>
  <div id="example1" class="line"></div>
  <div id="example2" class="line"></div>
</div>

Answer 1

至少在 Chrome 中，这种行为似乎是因为百分比值的像素等效值是如何计算的。

#example1 的大小是 437px⁺ 的 1%，正好是 4.37px 但它看起来像 Chrome（可能还有其他浏览器）这个值到最接近的整数。因为这个四舍五入，当你把它放大 50 倍时，宽度变成只有 200px。
当您将父级大小增加到 459px 时，您可以看到 #example1 行变为 250px 宽，因为 4.57 被四舍五入为 5px。
#example2的大小是437px（100%），当缩小到0.5时，宽度变成218.5px。任何小于 0.5 的值似乎都被四舍五入，而任何等于或大于 0.5 的值都被四舍五入，因此这里的宽度变为 219px。
由于上述原因，您可以看到元素宽度之间存在 19px 的差异。在代码片段中，我添加了其他几行像素值以供参考。绿色的宽度为 218px，黄色为 200px，紫色为 218.4px，巧克力色为 219px，棕色为 218.5px。你可以看到绿色和紫色的宽度是一样的，而巧克力色和棕色的宽度是 1px。
如果您将容器宽度设置为 100 的倍数，那么这个问题就会消失。请参阅代码段中的第二个块。请注意，它仍然有一个小偏差，因为 border 设置为 498px 的 1% 是 5px（所以 50 次是 250px）但是 .5 乘以 498px 是 249px。如果您删除 border（或 `box-sizing）并将父容器的大小设为 100 的倍数，您会发现它完全匹配。

^{+ 437px 因为即使我们说 100%，两边的 border-width 都被排除在 box-sizing: border-box.}

body {
  margin: 10px 30px;
}
#box {
  width: 439px;
  height: 200px;
  border: 1px solid black;
  box-sizing: border-box;
}
.line {
  height: 10px;
  transform-origin: left;
}
#example1 {
  width: 1%;
  transform: scaleX(50);
  background-color: red;
}
#example2 {
  width: 100%;
  transform: scaleX(.5);
  background-color: blue;
}
#example3 {
  width: 218px;
  background-color: green;
}
#example4 {
  width: 200px;
  background-color: yellow;
}
#example5 {
  width: 218.5px;
  background-color: brown;
}
#example6 {
  width: 219px;
  background-color: chocolate;
}
#example7 {
  width: 218.4px;
  background-color: purple;
}
#box2{
  width: 500px;
  height: 200px;
  border: 1px solid black;
  box-sizing: border-box;
}

<div id='box'>
  <div id="example1" class="line"></div>
  <div id="example2" class="line"></div>
  <div id="example3" class="line"></div>
  <div id="example4" class="line"></div>
  <div id="example5" class="line"></div>
  <div id="example6" class="line"></div>  
  <div id="example7" class="line"></div>
</div>

<div id='box2'>
  <div id="example1" class="line"></div>
  <div id="example2" class="line"></div>  
</div>

与我之前提到的相反（在评论和回答中），缩小线末端的模糊可能不是因为层差异，因为在这两种情况下，线只会得到一个渲染层和没有图形层。这种模糊是我现在无法解释的。

您可以在以下文章中阅读有关图层创建、合成和渲染的更多信息：

GPU Accelerated Rendering in Chrome

转换比例时宽度不一致

Inconsistent widths when transforming scale

css

css-transforms