Chrome 55：位置：固定；在 div 溢出：隐藏；不工作

Question

我将我的 chrome 更新到版本 55，现在我在 div overflow: hidden; 中的 position: fixed; 不再工作了。

这是一个例子： http://codepen.io/PRDev/pen/mOvwOO

.container {
  background: #d3d3d3;
}

.overflow {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.parallax {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #dfdfdf;
}

.next-section {
  position: relative;
  z-index: 10;
  height: 200vh;
}

<div class="container">
  <div class="overflow">
    <div class="parallax">
      <h1>Headline</h1>
      <p>Lorem ipsum</p>
    </div>
  </div>
  <div class="next-section">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

当我向下滚动时，文本在 div 溢出隐藏之外仍然可见，在 safari 和 chrome 54 上它是隐藏的，但在最新的 Chrome 55 中不可见。

在 .overflow 中的 chrome 54 文本隐藏在下一节中的文本后面，在 chrome 55 上，溢出中的此文本在下一节后面可见

Answer 1

我不认为这是如何溢出的问题：隐藏；作品。这决定了溢出其父级的内容会发生什么。您正在做的是将一个 div 移到另一个上，您看到后面的原因是因为 .next-section 没有背景。

给.next-section同样的bg颜色background: #dfdfdf;

body {
  margin: 0;
}
.container {
  background: #d3d3d3;
}
.overflow {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}
.parallax {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #dfdfdf;
}
.next-section {
  background: #dfdfdf;
  position: relative;
  z-index: 10;
  height: 200vh;
}

<div class="container">
  <div class="overflow">
    <div class="parallax">
      <h1>Headline</h1>
      <p>Lorem ipsum</p>
    </div>
  </div>
  <div class="next-section">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>