Parallax using pseudo elements (and their height)

Question

I'm trying to create a parallax effect on my site, and have looked at several css solutions. I chose one by Joshua Bemenderfer that can be seen here

I've slightly edited the example code to make the problem more obvious, but because it's using a pseudo element, which matches its parent's size, when I resize the parallax section I'm struggling to stop white space around the image from being visible as it moves.

(NB you have to go full screen on the snippet to see the problem):

*EDIT: Codepen because the snippet isn't showing the problem in full screen or in the preview

/* Tiny reset thingy */
body,html{margin:0;padding:0;}

.wrapper {
  /* The height needs to be set to a fixed value for the effect to work.
   * 100vh is the full height of the viewport. */
  height: 100vh;
  /* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
  overflow-x: hidden;
  /* Enable scrolling on the page. */
  overflow-y: auto;
  /* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
  perspective: 2px;
}

.section {
  /* Needed for children to be absolutely positioned relative to the parent. */
  position: relative;
  /* The height of the container. Must be set, but it doesn't really matter what the value is. */
  height: 200px;
  
  /* For text formatting. */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 0 5px #000;
}

.parallax::after {
  /* Display and position the pseudo-element */
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  /* Move the pseudo-element back away from the camera,
   * then scale it back up to fill the viewport.
   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
  transform: translateZ(-1px) scale(1.5);
  /* Force the background image to fill the whole element. */
  background-size: 100%;
  /* Keep the image from overlapping sibling elements. */ 
  z-index: -1;
}

/* The styling for the static div. */
.static {
  background: red;
}

/* Sets the actual background images to adorable kitties. This part is crucial. */
.bg1::after {
  background-image: url('https://placekitten.com/g/900/700');
}

.bg2::after {
  background-image: url('https://placekitten.com/g/800/600');
}

<main class="wrapper">
  <section class="section static">
    <h1>Boring</h1>
  </section>
  <section class="section parallax bg2">
    <h1>SO FWUFFY AWWW</hi>
  </section>
    <section class="section static">
    <h1>Boring</h1>
  </section>
</main>

Any ideas on how to fix this? I can't seem to get it working without breaking the effect

Thanks

Answer 1

Make the pseudo element bigger to hide this bad effect. Simply make the top bottom value negative:

/* Tiny reset thingy */
body,html{margin:0;padding:0;}

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

.section {
  position: relative;
  height: 200px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 0 5px #000;
}

.parallax::after {
  content: " ";
  position: absolute;
  top: -100px;
  right: 0;
  bottom: -100px;
  left: 0;
  
  transform: translateZ(-1px) scale(1.5);
  background-size: 100% auto;
  z-index: -1;
}

/* The styling for the static div. */
.static {
  background: red;
}

/* Sets the actual background images to adorable kitties. This part is crucial. */
.bg1::after {
  background-image: url('https://placekitten.com/g/900/700');
}

.bg2::after {
  background-image: url('https://placekitten.com/g/800/600');
}

<main class="wrapper">
  <section class="section static">
    <h1>Boring</h1>
  </section>
  <section class="section parallax bg2">
    <h1>SO FWUFFY AWWW</h1>
  </section>
    <section class="section static">
    <h1>Boring</h1>
  </section>
</main>