Question

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

第一个是：

1％宽度
50x比例

第二个是：

100％宽度
.5x scale

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之外。}

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

GPU Accelerated Rendering in Chrome

转换比例时的宽度不一致

1 个答案: