I'm in the process of developing a website with a video banner set to fixed positioning in the background, and a div that has absolute positioning covering part of the video on the bottom half. However, I've encountered an issue - when I add this second div with absolute positioning, the width of the screen increases if there is vertical overflow within this div, causing the video sizing to be disrupted.
Here is the code snippet:
<div class="row" style="height: 5%;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-color: black; box-shadow: 0px 10px 5px #000000; z-index:5; padding:0;">
Search
</div>
</div>
</div>
<div class="container-fluid video" style="height:70%; z-index:5; padding:0; margin:0;">
<div class="row" style="padding:0; margin:0; height: 100%;">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12" id="video-container" style="background-color:white; height:100%; padding:0; margin:0;">
<video autoplay="" loop="" style="position: fixed; right:0px; bottom: 0; min-width: 100%; min-height: 100%; transform: translateX(calc((100% - 100vw) / 2));">
<source src="beats/titlescreen.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="container-fluid header" style="background-color: red; position:absolute; height:100%;">
This is a test
</div>By setting the height to 100% in the last div as shown above, there's a vertical overflow on the page which causes the width to increase slightly compared to when there's no overflow (removing 'height: 100%;' reveals this difference).
I'm puzzled by why this issue occurs only on Chrome. Any thoughts?