网页右侧出现未知空白答案

【问题标题】：Unknown white space appear on the right side of web page网页右侧出现未知空白
【发布时间】：2016-01-15 02:21:32
【问题描述】：

外观如下：

[]

我在 ReactJS 中创建了页面，但我已经复制了页面 here。

为了更好地显示空白，以下是屏幕截图：

几个有趣的观察：

第一次加载页面时，没有这个问题。
仅当第二个图像框（那里有 100% 条的那个）添加到 DOM 时才会出现问题
screen.width = 375
$('html').width() = 375，也
我不知道空白是如何以及为什么出现的，也找不到任何宽度 > 375 的元素。（虽然我没有检查所有元素）
$('body').find('div').each(function(idx,e){if($(e).width() > 375) console.log($(e).width())}) 不会给我任何输出
我尝试检查那个白色区域，但不能。这意味着向我展示身体
此问题同时出现在网络和移动设备上
我上面显示的 codepen 中的代码没有出现此问题，尽管该代码是生成的 HTML 的精确副本（我直接从 Chrome Inspector 复制），并删除了所有 javascript

任何想法：1）为什么出现空白？ 2) 我该如何解决这个问题？

PS：以防万一你错过了我放 CodePen 链接的部分，Here it is again。

更新 2：我将这个输入框放在页面之外：

<input type="file" class="attache-upload-button" data-reactid=".0.0.1.3.1.1.0.0.1">

对应样式：

.review-add-form form .uploader .attache-upload-area .attache-upload-button {
  position: fixed;
  top: -1000px;
}

【问题讨论】：

@MattiaNocerino 看右边第二张图，大片的空白不应该在那里
@MattiaNocerino 你太棒了！ svg 实际上是问题所在！你是怎么得到灵感的……？
OK 问题在 15 分钟内解决了。你们的响应速度非常快 :) 非常感谢所有建设性的 cmets :)
我正在考虑结束这个问题.. 但是随着 cmets 区域的讨论（以及下面的答案），我认为这个问题可能具有其未来参考价值
@songyy：请阅读我上面链接的How to create a Minimal, Complete, and Verifiable example 页面。经历这样做的过程是有原因的。如果您这样做了，您可能会在比您花更多时间发布问题之前花费更多时间之前发现问题的时间少得多。 “减少直到问题消失并查看您删除的最后一个东西”是一种历史悠久的基本调试技术。

【解决方案1】：

我用 chrome 检查器检查了 DOM，发现<svg class="bar"> 的宽度超出了范围。我尝试将 overflow: hidden 设置为包含元素 .progress-bar-circle 并且空白消失了

【讨论】：