TranslateZ adding extra white space at the bottom of html container element

Question

I am trying to create a parallax effect in which different elements scroll at different speeds by applying 3-d transform

Problem

I have a container with a class of parallax. Whenever i add a div inside it which contains multiple layers translated at Z coordinate, there's extra white space added at the bottom of container with the class of parallax

How can i remove this extra white space?

Code

body {
  margin: 0;
}

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 10px;
}

.parallax__group {
  height: 100vh;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s ease;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.title {
  font-size: 1.7rem;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.parallax__layer--back {  
  transform: translateZ(-5px) scale(1.5);
  z-index: 3;
}

.parallax__layer--base {
  transform: translateZ(0);
  z-index: 4;
}

.parallax__group:nth-of-type(1) {
  z-index: 2;
}

#group1 .parallax__layer {
  background: #36ffbf;
}

#group2 .parallax__layer--back {
  background: #00f1a4;
}

<div class="parallax">
    <div id="group1" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
    <div id="group2" class="parallax__group">
      <div class="parallax__layer parallax__layer--back">
        <div class="title">Background Layer</div>
      </div>
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
</div>

Answer 1

Add overflow: hidden; to .parallax__group and your whitespace goes.

body {
  margin: 0;
}

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 10px;
}

.parallax__group {
  height: 100vh;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s ease;
  overflow: hidden;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.title {
  font-size: 1.7rem;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.parallax__layer--back {  
  transform: translateZ(-5px) scale(1.5);
  z-index: 3;
}

.parallax__layer--base {
  transform: translateZ(0);
  z-index: 4;
}

.parallax__group:nth-of-type(1) {
  z-index: 2;
}

#group1 .parallax__layer {
  background: #36ffbf;
}

#group2 .parallax__layer--back {
  background: #00f1a4;
}

<div class="parallax">
    <div id="group1" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
    <div id="group2" class="parallax__group">
      <div class="parallax__layer parallax__layer--back">
        <div class="title">Background Layer</div>
      </div>
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
</div>