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

Question

I updated my chrome to version 55 and now my position: fixed; in a div overflow: hidden; doesn't work anymore.
Here is the example:
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>
When I'm scrolling to down, the text is still visible outside div overflow hidden, on safari and chrome 54 it is hidden but not in latest Chrome 55.
On chrome 54 text in .overflow hide behind text in next-section, on chrome 55 this text in overflow is visible behind next-section

Answer 1

I dont think this is an issue with how overflow:hidden; works. That dictates what happens to content that overflows its parent. What you are doing is moving one div over another and the reason you see the one behind is because .next-section didnt have a background.
give .next-section the same bg color 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>