Absolute positioned content causing unexpected spacing on top of relative positioned content

I've been experimenting with a fantastic technique by Chris Coyier for implementing full page video backgrounds with content scrolling over the video. However, I've encountered an issue where there's an unexpected gap to the right in Windows browsers. Oddly enough, this problem does not occur in Mac browsers (I've tested on Safari, Firefox, and Chrome). The gap persists across all Windows browsers that I've tested.

The CSS code for the main white content area is as follows:

main {
  background: white;
  position: relative;
  padding: 1rem;
  margin-top: 100vh;
}
main::before {
  content: "";
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: -100vh;
}

Could this be related to the scrollbar? Has anyone found a solution to this issue or can shed light on why it specifically affects Windows browsers?

Here is the link to the Fiddle for reference: https://jsfiddle.net/8y2v79nj/

Check out Chris' original article here: https://css-tricks.com/full-page-background-video-styles/

I'm using Chris' example from Codepen: https://codepen.io/chriscoyier/pen/BRvdgK

Screenshot of Mac display without the gap: https://i.stack.imgur.com/pyfIM.png

Screenshot of Windows display showing the unwanted gap: https://i.stack.imgur.com/S7djM.png

javascripthtmlcss

Answer №1

The issue arises from the fixed width set for the y-scrollbar, while only hiding the x-scrollbar using overflow-x: hidden; on the body.

To eliminate the reserved width of the scrollbar on the body, you can include the following styles in your code:

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

Here is the complete code snippet:

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;
}

/* Rest of CSS rules... */

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When a <dl> element is nested within an <ol>, it will be rendered as a list format

I'm facing an issue with my CSS that affects how different browsers render definition lists embedded within ordered lists. In IE10, the list displays as expected - a bulleted list inside the ordered list without affecting the numbering. However, Firef ...

htmlcssgoogle-chrome

Choose a subclass within a superclass by utilizing the "this" keyword

Whenever a user clicks on the class addMass, I want to add the attribute data-rate to the element with the class currentMass. Since there can be multiple elements with the class addToCart, I need to ensure that the changes are only applied to the one that ...

javascriptjquerythis

The AJAX load event listener triggers prior to receiving a response from the server

When working on a script to upload images via AJAX, the process is as follows: a user selects an image using a form file input field. The form contains an onsubmit function that prevents the page from reloading after submission. Within this function, data ...

javascriptphpajaxxmlhttprequestsubmit

Importing WebAssembly dynamically can sometimes lead to complications with the order of execution

I am attempting to load a WASM library from another node js application, both utilizing webpack. Within the WASM library, I have the following code snippet exporting the functionality. export default import("./pkg") .then(s => { le ...

javascriptnode.jswebassembly

Error: the search variable is not defined

function sorting(type) { $("#parentDiv").empty(); $.getJSON("example_data.json", ({ Find })); function Locate(a, b) { return (a[Find.type] < b[Find.type]) ? -1 : (a[Find.type] > b[Find.type]) ? 1 : 0; }; } The example_data.j ...

javascriptjqueryjsonsorting

Display a pdf stream within a fresh window

I have a PDF document generated on the server that I need to display on the client side. The code on the server looks like this: ByteArrayOutputStream baos = generatePDF(); response.setContentType("application/pdf"); response.setHeader("Content-Dispositio ...

javascriptjqueryspringpdfstream

What is the best way to resize an image within an SVG shape to completely fill the boundaries?

There is an SVG shape in the form of a parallelogram that has been filled with an image. To view the demo, click here. The code for the SVG object is as follows: <svg style="overflow:visible; margin-left:111px; margin-top:22px; " height="86" width=" ...

htmlcsssvg

Ways to access information received from AngularJS in a different Javascript file

I am currently using Angular to retrieve output from a controller and display it using ng-bind. However, I have another separate JavaScript file that needs to utilize a value returned from Angular. In the example code provided below, the TestAppCtrl is ca ...

javascriptangularjs

After applying the rotateY function, the z-index appears to be malfunctioning

My current project involves creating a page flip effect, which requires two overlapping div elements. Initially, both divs are side by side with the second div having a -webkit-translateY(180deg) property applied to it. The first div has a z-index of 2, wh ...

htmlcss

Tips on how to collapse all elements whenever one is being opened in a FAQ card using ReactJS

Clicking on a question reveals its text, and clicking on another collapses the previous one. The issue arises when trying to close an open question by clicking on it again - it doesn't work as intended due to a potential error in the If statement [im ...

javascriptreactjsfunctionif-statementreact-hooks

What is the best way to make my background image adapt to different screen sizes

I am currently working on updating my webpage and facing a few challenges that I would appreciate some assistance with: One issue is that the images on my page do not adjust to the size of the browser window. As a result, when I resize the window, the i ...

csshtmlresponsive

Transforming an Input Field into a String with React's onChange Event

I have a small application consisting of three components Parent Component: App Son Component: Courses Grandchild Component: Course The state of the app is stored in the App component. In the Course component, there is an input field with an onChange ev ...

javascriptreactjsinputstate

Complete and automatically submit a form in a view using AngularJS

I have developed a basic AngularJS application that is functioning smoothly. Currently, I am looking to populate certain fields and submit the form directly from the view without requiring any user input. Below, you'll find some simplified JavaScrip ...

javascripthtmlangularjsforms

Is it possible to switch the summernote editor between airmode and toolbar mode?

Currently, I am working on creating a report editor that displays only one toolbar when multiple summernote WYSIWYG editor sections are used. My solution involves having the first section as a full editor and the other section in airmode. Below is the HTM ...

javascriptjqueryangularjssummernote

Tips for efficiently playing a WAV file in JavaScript by building an AudioBuffer

I'm having trouble playing the WAV file located at this link. The file plays fine in VLC and the details show that it is a Mono IMA WAV APDCM Audio (ms) file sampled at 24000Hz with 16 bits per sample. However, when I try to play the file by embeddin ...

javascripthtmlaudiowavaudiobuffer

I'm experiencing issues with my code involving HTML, CSS, and jQuery

Recently, I started learning about jQuery and came across a tutorial on creating a sticky nav bar. However, something went wrong during the implementation and now I don't know how to fix it! In my Script file, I have written code that should run on l ...

javascriptjqueryhtmlcss

Tips for eliminating any default white space visible between tags:

What is the best way to eliminate white space gaps between div tags and adjust pixel differences between them in HTML code? My current alignment is off and there are noticeable white spaces between div tags. I have tried using a reset link but it didn&apo ...

jqueryhtmlcss

Is it possible to nest an HTML <span> inside a label tag in a Rails form_for?

Is it possible to nest a span element inside a form_for label tag? I am trying to achieve this in order to style a specific part of the label using CSS, such as making the text red. While it seems like valid HTML based on my research, it is causing some is ...

ruby-on-railscssformshtmlruby-on-rails-3

Having issues with ToggleClass and RemoveClass functionalities not functioning properly

As a novice in Jquery and CSS/scss, I've managed to create dynamic bootstrap cards for recording players. Each card consists of a music-container with control-play and vinyl elements. I aim to have multiple bootstrap cards generated based on the data ...

javascriptjqueryhtmlcssjquery-ui

Leveraging nested objects within React state

A React child cannot be an object. If you intended to render a collection of children, utilize an array Encountering the error mentioned above has left me puzzled regarding its restrictions. Below is the code where I am facing this issue. It includes an o ...

javascriptreactjs