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

Extract the value of an HTML tag and store it in a PHP variable

I have successfully implemented JavaScript code to dynamically update the value of an input tag in my popup. However, when I try to echo out this updated value using a PHP variable within the same popup, it doesn't seem to work as expected. Despite un ...

javascriptphpjqueryhtml

Getting the Angular component class reference within a triggered Highcharts selection event callback - what's the best approach?

It seems like I'm facing a common javascript closure issue, but let me illustrate it with a specific example as I'm struggling to grasp it in an Angular context. In my Angular component, I'm using the Highcharts library to visualize data. W ...

javascriptangulartypescripthighcharts

How can we reduce the size of a JSON object in Typescript before sending it to the client?

Currently, I am faced with a common challenge. I have a database object that is a standard JS object originating from a document database, and my goal is to transmit this object to the client. However, certain fields contain sensitive information that shou ...

javascriptjsontypescriptdry

I am currently studying react.js and struggling to comprehend how the deployment process for a react app functions

Will the server only serve the index.html file or is there a way for the client to run that html file as it's not a regular html file? Do I need a backend node to make it work? I'm having trouble understanding the entire process. Normally, a cli ...

javascriptreactjsreact-router

Different ways to generate DOM element using jQuery

When it comes to creating a new DOM element from JavaScript or jQuery code, there are numerous methods to consider. Some examples include: $('<div>').prop('id','someid').addClass('someclass'); $('<div& ...

javascriptjqueryhtmldom

Extracting precise information from a JSON file using Angular's $http.get

I am struggling with extracting a specific user from a JSON file containing a user list and displaying it on an Angular index page. Despite extensive research, I have been unable to find a satisfactory solution. The user list must remain in a JSON file ins ...

javascriptangularjsjson

Testing XMLHttpRequest with Jasmine: A Complete Guide

Is there a way to test the onreadystatechange function on XMLHttpRequest or pure JavaScript AJAX without using jQuery? I need to do this because I'm working on a Firefox extension. It seems like I may have to use spies, but I'm having trouble bec ...

javascriptajaxjasmine

Show a specific div using jQuery fadeIn() when the user reaches the top of an HTML section

The code below has a specific purpose: 1) Determine the current scroll position. 2) Locate the parent article and determine its offsetTop for each .popup_next which represents a section on the site. 3) Calculate an offset value by adding 30px to the off ...

javascriptjquerydebugging

Incorporating a function from a separate .js file into an index.ejs view using app.js

graphs.js: contains a function that initiates an API call and retrieves an object containing an HTML link for embedding a graph. app.js: includes the following (graphs.js has been imported): var express = require("express"); var app = express(); var grap ...

javascriptnode.jsexpress

The MongoDB oplog displays repetitive patterns at unpredictable intervals

My current focus is on utilizing MongoDB and the oplog has proven to be a crucial component of my application. However, I've noticed a recurring issue during development where the oplog contains duplicate records (changes) 3 or 4 times. In an attempt ...

javascriptmongodb

Delete the line-height property from the initial line

I have created text that is aligned using the "justify" option, and I would like to add some leading to the text. However, I want the first line of the text to remain at x:0px y:0px. Does anyone know how to remove the line-height from the first line of a ...

htmlcssdom

What is the best way to insert a triangle shape to the bottom of a div with an opacity level set at 0.2

https://i.stack.imgur.com/sqZpM.png I've been trying to create something similar, but my triangle keeps overlapping with the background in the next section. I've already spent 3 hours on it. Any help would be greatly appreciated. Check out my c ...

htmlcssangularsass

Display HTML containing a <script> tag within a REACT component

Looking to embed the following HTML code within a React component: <form action="/process-payment" method="POST"> <script src="https://www.example.com/payment-script.js" data-preference-id="$$id$$"> </script> </form> I ...

javascripthtmlreactjs

A preselected default option determined by your geographical location in an HTML document

After searching extensively for a solution, I've found this to be quite challenging... In my website's HTML page, there is a dropdown menu containing all the countries. <option value="AF">Afghanistan</option> <option value="AX"&g ...

html

MongoDB issued an error notification stating: "The operation `disneys.insertOne()` has experienced a timeout after 10000 milliseconds."

I am currently in the process of developing a new API using MongoDB and Express, and I have come across the following issue: "Operation disneys.insertOne() buffering timed out after 10000ms." To test my API, I am using route.rest. However, I ...

javascriptnode.jsmongodbexpress

Selenium WebDriverJs has difficulty in setting up a new client for iOS devices

Struggling to make Selenium WebDriverJS work with the iOS browser, but unfortunately facing some issues. I followed the instructions on setting up the "iWebDriver" project as mentioned on the iPhoneDriver wiki page. The Python script worked fine, and even ...

javascriptiosseleniumselenium-webdriver

Styling in CSS to ensure scrollbar is constantly displayed without narrowing the container's width

Is it possible to have a vertically scrollable div with an always visible scrollbar without the scrollbar affecting the width of the elements inside? I attempted some CSS modifications, but the scrollbar still reduced the available width of the div. Is th ...

htmlcssstylesheet

Combining JS Promise.all with onDOMContentLoaded to ensure all resources are

Is there a way to efficiently retrieve a json file for data while also waiting for the dom to load in order to populate a table simultaneously? The current method I am using is slow as it waits for the dom and then performs the get request. $(document).r ...

javascriptjqueryasynchronouspromise

I have noticed that the share buttons on Sharethis.com only show up after I resize the viewport

After integrating share buttons from Sharethis.com, I noticed that they do not appear when the page is refreshed. However, when I resize the viewport, they suddenly show up. <!DOCTYPE html> <html lang="en"> <head> <script t ...

htmlbuttonsharebootstrap-5

Modification of text within a text field via a context menu Chrome Extension

Currently, I am embarking on my first endeavor to create a Chrome extension. My goal is to develop a feature where users can select text within a text field on a website using their mouse and have the ability to modify it by clicking on a context menu. Be ...

javascriptgoogle-chrome-extension