Multiple fixed backgrounds without background-attachment: fixed - html

Question

I'm creating a simple website that is supposed to have a parallax-type effect. Originally it was using background-attachment: fixed;, however that's causing a repaint on each scroll, leading to some noticeable FPS drops.
Here is the desired effect, which in the real use-case, is causing slight stuttering:
body {
padding: 0;
margin: 0;
}
#container,
#container2 {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
height: 100vh;
}
#container {
background-image: url('http://fillmurray.com/1200/1200');
}
#container2 {
background-image: url('http://placekitten.com/1200/1200')
}
#more-content {
font-size: 48px;
padding: 35vh 0;
text-align: center;
background-color: white;
}
<div id="container"></div>
<div id="more-content">
Here's some more content
</div>
<div id="container2"></div>
As a work-around, I've created a div and applied a ::before pseudo-element that's position: fixed;, and I've set it into the background by doing z-index: -1;. I've added will-change: transform; to avoid repaint issues.
body {
padding: 0;
margin: 0;
}
#container {
height: 100vh;
overflow: hidden;
position: relative;
}
#container::before {
content: ' ';
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-image: url("http://www.fillmurray.com/1000/1000");
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
will-change: transform;
}
#more-content {
text-align: center;
font-size: 48px;
padding: 50vh 0px;
background-color: white;
}
<div id="container"></div>
<div id="more-content">
Here's some more content
</div>
The problem is introduced once I try and create a second fixed image, beneath the section that says "Here's some more content". Because position: fixed; takes the element out of the flow (despite its parent being position: relative), I can't figure out a method to incorporate the second image, preserving the "wipe" effect in my first example. Being that they occupy the same space, only one image shows.
I've seen a few people ask similar questions, though most were not recent, nor did they have any answers.
I'm open to suggestions, otherwise I'll be tasking myself with a JavaScript workaround.