Pure CSS Parallax additional space problem [duplicate] - css

Question

This question already has an answer here:
Pure CSS-Parallax: Inconsistent Scrolling between Firefox and Chrome
(1 answer)
Closed last year.
What I want to achieve
I want to add a parallax effect to a single fullscreen section with dynamic content (has not fixed height) and a background.
I would like that on a scroll the background would move slower than the content and that the background would be high enough to cover the whole content.
What I've tried
To achieve that I have:
set perspective: 10px to .root
set transform: translateZ(-10px) scale(2) to .background
put .background into .container and set it's position to absolute so it has the container's height (which is dependent on content's height)
Problem
The problem is that when I scroll down to the bottom I can see:
bottom of the .content
a piece of a .background
a black piece of body's black background (appears on Chrome)
When I would scroll down to the bottom I would like that the .content would be the end of the screen and that I wouldn't see anything else beneath it.
Code
body { margin: 0; background: #000; }
.wrapper {
height: 100vh;
overflow: scroll;
perspective: 10px;
}
.container {
position: relative;
transform-style: preserve-3d;
}
.content {
display: flex; flex-direction: column; justify-content: space-between;
height: calc(100vh + 100px);
padding: 20px 0;
background: rgba(255, 0, 0, 0.2);
text-align: center;
}
.background {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
background-image: linear-gradient(cyan, pink);
transform: translateZ(-10px) scale(2);
}
<div class="wrapper">
<div class="container">
<div class="content">
<p>top content</p>
<p>center content</p>
<p>bottom content</p>
</div>
<div class="background"></div>
</div>
</div>
Question
How can I achieve it?
I have no idea how can I make it work.
Please help

Answer 1

Something like this?
body { margin: 0; background: #000; }
.wrapper {
height: 100vh;
overflow: scroll;
perspective: 10px;
}
.container {
position: relative;
transform-style: preserve-3d;
}
.content {
display: flex; flex-direction: column; justify-content: space-between;
padding: 20px 0;
background: rgba(255, 0, 0, 0.2);
text-align: center;
}
.content p {
height: 100vh;
}
.background {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
background-image: linear-gradient(cyan, pink);
}
<div class="wrapper">
<div class="container">
<div class="content">
<p>top content</p>
<p>center content</p>
<p>bottom content</p>
</div>
<div class="background"></div>
</div>
</div>