网页右侧出现未知空白

Question

这是外观：

[]

我在 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 的部分，又来了。

更新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

并且空白消失了

Answer 2

将其添加到 CSS 中：

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

Answer 3

多次遇到这个问题，就我而言，通常是一个

div

或

element

穿过屏幕宽度从而拉伸，也许尝试使用 chrome 开发工具进行分析并检查布局，尝试获取去掉一些 div 并看看它是否改变了任何东西，或者可能减少绝对大小元素的宽度，等等。

Answer 4

html, body {
   overflow-x: hidden
}