Home Unwanted gap on absolute positioned content on top of relative positioned content

Questions

Unwanted gap on absolute positioned content on top of relative positioned content

September 9, 2022

I’m playing around with Chris Coyiers brilliant approach to full page video with content scrolling over the video, but I’m getting an unwanted gap to the right in Windows browsers. The weird thing is that it’s not happening in Mac browsers (currently testing in Safari, Firefox and Chrome). In Windows browsers this happens in all the browsers I’m testing with.

The css for the white main content area looks like this:

main {
  background: white;
  position: relative;
  padding: 1rem;
  margin-top: 100vh;
}

main::before {
  content: "";
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: -100vh;
}

Could it be scrollbar related? Has anyone found a solution to this or can explain to me why this happens in Windows?

Please see this Fiddle: https://jsfiddle.net/8y2v79nj/

Chris’ article: https://css-tricks.com/full-page-background-video-styles/

Chris’ example that I’m using: https://codepen.io/chriscoyier/pen/BRvdgK

Mac screenshot with no gap:

Windows screenshot with the unwanted gap:

>Solution :

The problem is from the reserved width for the y-scroller, and you only hide the x-scroller by overflow-x: hidden; on body.

You can add this to your styles that will help you to get rid of the reserved width of the scroller on body.

body::-webkit-scrollbar {
  display: none;
}

Full code

var viewportHeader = document.querySelector(".viewport-header");

document.body.addEventListener("scroll", function(event) {
  var opacity = (document.body.offsetHeight - document.body.scrollTop) / document.body.offsetHeight;
  var scale = (document.body.offsetHeight - document.body.scrollTop) / document.body.offsetHeight;
  document.documentElement.style.setProperty('--headerOpacity', opacity);
  document.documentElement.style.setProperty('--headerScale', scale);
});

:root {
  --headerOpacity: 1;
  --headerScale: 1;
}

.video-header {
  position: absolute;
  text-align: center;
  width: 100vw;
  height: 100vh;
}

.video-header,
.video-header video,
.video-header .viewport-header {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

.video-header video {
  background: brown;
  object-fit: cover;
}

.video-header .viewport-header {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  opacity: var(--headerOpacity);
  transform: scale(var(--headerScale));
}

html,
body {
  height: 100vh;
  overflow-x: hidden;
}

body::-webkit-scrollbar {
  display: none;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 150%;
  line-height: 1.4;
}

body {
  margin: 0;
}

h1 {
  font-family: "Syncopate", sans-serif;
  color: white;
  text-transform: uppercase;
  letter-spacing: 3vw;
  line-height: 1.2;
  font-size: 3vw;
  text-align: center;
}

h1 span {
  display: block;
  font-size: 10vw;
  letter-spacing: -1.3vw;
}

main {
  background: white;
  position: relative;
  padding: 1rem;
  margin-top: 100vh;
}

main::before {
  content: "";
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: -100vh;
}

main p {
  max-width: 600px;
  margin: 1rem auto;
}

<header class="video-header">
  <video src="https://css-tricks-post-videos.s3.us-east-1.amazonaws.com/Island%20-%204141.mp4" autoplay loop playsinline muted></video>
  <div class="viewport-header">
    <h1>
      Explore
      <span>Montana</span>
    </h1>
  </div>
</header>

<main>
  <p>
    test
  </p>
  <p>
    test
  </p>
  <p>
    test
  </p>
  <p>
    test
  </p>
  <p>
    test
  </p>
  <p>
    test
  </p>
</main>