网页右侧显示未知的空白区域

Question

以下是：

[]

我在ReactJS中完成了该页面，但我已复制了该页面here。

为了更好地显示空白区域，请点击此处的屏幕截图：

几个有趣的观察结果：

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

任何想法：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;
}

Answer 1

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