【问题标题】：Scaling a 1% width div up 100 times doesn't cover the full width of the parent将 1% 宽度的 div 放大 100 倍并不能覆盖父级的整个宽度
【发布时间】：2015-10-27 19:54:04
【问题描述】：

我正在尝试制作进度条。

您会认为宽度为 1% 的 div 水平放大 100 倍会跨越其父级的宽度，但事实并非如此。留缝的空间量取决于我的窗口大小，所以我认为这可能是浏览器中的舍入问题。有什么我可以做的吗？

我经常更改此栏的进度，因此我不想每次都更改栏的宽度属性，因为这会导致performance issues。

body {
  margin: 0;
  padding: 0;
}
#container {
  background-color: red;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  padding: 0;
  margin: 0;
  height: 100px;
}
#progress {
  position: absolute;
  left: 0;
  top: : 0;
  width: 1%;
  height: 100%;
  background-color: yellow;
  transform: scale(100, 1);
  transform-origin: left top;
}

<div id="container">
  <div id="progress">
  </div>
</div>

我还做了一个codepen来演示这个问题：http://codepen.io/bigblind/pen/Zbozjv

【问题讨论】：

只是从宽度 1% 过渡到宽度 100%，为什么要使用缩放？
为了性能。改变宽度意味着浏览器需要重新计算布局并重新绘制。每秒执行大约 5 次确实会导致性能问题。
对我来说听起来像是过早的优化，但是 ymmv。
相信我，现在还为时过早，我遇到了严重的性能问题，切换到转换解决了很多问题。

标签： css css-transforms

【解决方案1】：

留缝的空间量取决于我的窗口大小，所以我认为这可能是浏览器中的舍入问题。

是的。这是。

我不想每次都改变栏的宽度属性

我不是想在这里讨论性能问题，而只是想集中精力解决如果不是width 那么可以使用什么属性？

好吧，你可以完全颠覆你的进步。与其将#progress div 展开以显示进度量，不如将其滑开以显示背景#container div 以显示进度量。使用translate 滑动进度。

在下面的演示中，将鼠标悬停以查看转换的效果。

演示小提琴：http://jsfiddle.net/abhitalks/y2o7yub9/1

演示片段：

* { box-sizing: border-box; padding: 0; margin: 0; }
html, body { width: 100%; }
#container{
    background-color: yellow; position: fixed;
    left: 0; right: 0; top: 0;
    height: 100px; width: 100%;
    overflow: hidden; white-space: nowrap;
}
#progress{
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: red;
    transform: translateX(0%); transition: transform 0.5s;
}
#container:hover > div { transform: translateX(100%); }

<div id="container">
  <div id="progress"></div>
</div>

【讨论】：

【解决方案2】：

问题

在我看来存在舍入问题。

在 1920 像素显示器上，1% 转换为 19.188 像素，然后向下舍入为 19 像素

19 像素 * 100 = 1900 像素，留下 20 像素的间隙。

更多信息在这里：http://ejohn.org/blog/sub-pixel-problems-in-css/

编辑：如果您重新调整浏览器的大小，在某些宽度上，红色部分会变大、变小或消失；这证实了舍入问题。

解决方案

声明一个固定宽度的进度条：200px
将其初始化为无法向上/向下舍入的 2px

【讨论】：