javascript - 网页右侧出现未知空白

Question

外观如下:

[ ]

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

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

一些有趣的观察:

• 首次加载页面时，不存在此类问题。
• 仅当第二个图像框(其中有 100% 栏的图像框)添加到 DOM 时才会出现此问题
• 屏幕宽度 = 375
• $('html').width() = 375，还有
• 我不知道空白是如何以及为何出现的，也找不到任何宽度 > 375 的元素。(不过我没有检查所有元素)
• $('body').find('div').each(function(idx,e){if($(e).width() > 375) console.log($(e) .width())}) 不会给我任何输出
• 我尝试检查那个白色区域，但不能。这意味着向我展示 body
• 此问题在网络和移动设备上都会出现
• 上面显示的 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;
}

Answer 1

我用 chrome 检查器检查了 DOM，我看到 <svg class="bar">宽度超出。我试图设置 overflow: hidden到包含元素 .progress-bar-circle空白消失了