html - Chrome 55 : position: fixed; in div overflow: hidden; doesn't work

Question

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

例子如下: 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 中不是。

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

Answer 1

我认为这不是溢出:隐藏的问题；作品。这决定了溢出其父级的内容会发生什么。您正在做的是将一个 div 移到另一个 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>