将 1% 的宽度 div 放大 100 倍并不能覆盖父级的整个宽度

Question

我正在尝试制作进度条。

您可能认为宽度为 1% 的 div 水平放大 100 倍会跨越其父级的宽度，但事实并非如此。 space 左接缝的数量取决于我的 window 尺寸，所以我认为这可能是浏览器中的舍入问题。我可以做些什么来完成这项工作吗？

我经常改变这个栏的进度，所以我不想每次都改变栏的宽度属性，因为那样会导致 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

Answer 1

The amount of space left seams to depend on my window size, so I think this might be a rounding issue in the browser.

是的。这是。

I don't want to change the bar's width property every time

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

好吧，你可以把你的进步倒过来。不是 #progress div 展开以显示进度，而是将其滑开以显示背景 #container div 以显示进度。使用 translate 滑动进度。

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

演示 Fiddle：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>

Answer 2

问题

我认为存在舍入问题。

在 1920 像素的显示器上，1% 被转换为 19.188 像素，四舍五入为 19 像素

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

此处有更多信息：http://ejohn.org/blog/sub-pixel-problems-in-css/

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

解决方案

声明一个固定宽度的进度条：200px
初始化为2px不能四舍五入up/down

将 1% 的宽度 div 放大 100 倍并不能覆盖父级的整个宽度

Scaling a 1% width div up 100 times doesn't cover the full width of the parent

css

css-transforms

问题

解决方案