网页右侧出现未知白色space

Question

外观如下：

[]

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

为了更好的显白space，截图如下：

几个有趣的观察：

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

关于以下问题的任何想法：1) 为什么会出现白色 space？ 2) 我该如何解决这个问题？

PS：以防万一你错过了我把 link 放到 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;
}

Answer 1

我和 chrome 检查员一起检查了 DOM，我发现 <svg class="bar"> 的宽度超标了。我试图将 overflow: hidden 设置为包含元素 .progress-bar-circle 并且空格消失了

Unknown white space appear on the right side of web page