'Jumping Scroll On Page Refresh

I wanted to make fullscreen background video as "background: url('img') cover center". I made It by JS, but I'm having a problem on page refresh.

When my bottom part of viewport locating higher than center of <h2>Content</h2> on page refresh I will get jumped higher for some pixels. And on next refreshes I will get the same effect till I get to the top of the page.

The only fix I found: remove <video>, but this doesn't looks like a good solution.

Code example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <style>
        html, body, main {
            margin: 0;
            height: 100%;
        }
        * {
            box-sizing: border-box;
        }
        section {
            display: block;
            width: 100%;
            height: 100%;
            background-color: rgb(68, 72, 89);
            overflow: hidden;
            position: relative;
        }
        .section-1-colorize {
            z-index: 3;
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #0b1d2a;
            opacity: 0.65;
        }
        #background-video {
            position: absolute;
            z-index: 3;
            overflow: hidden;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .s2, .s3 {
            display: flex;
            color: #fff;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-size: 3em;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
        .s3 {
            background-color: #0b1d2a;
        }
    </style>
</head>
<body>
    <main>
        <section>
            <video autoplay muted loop id="background-video">
                <!-- <source> appearing by JS code below -->
            </video>
            <div class="section-1-colorize"></div>
            <span style="position: absolute; z-index: 5; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px;">Hello, World!</span>
        </section>
        <section class="s2">
            <h1>Any</h1>
            <h2>Content</h2>
            <h1>HERE</h1>
        </section>
        <section class="s3">
            <h1>Any</h1>
            <h2>Content2</h2>
            <h1>HERE</h1>
        </section>
    </main>

<script>
    var video = document.getElementById('background-video');
    var source = document.createElement('source');
    source.src = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4';
    source.type = 'video/mp4';
    video.appendChild(source);
    // Appending source with src and type
    video.load();

    // Simulating "background-size: cover;" for video
    video.onloadeddata = function () {            
        function solution() { // Calculating what should be used "width" or "height" 100%
            var video = document.getElementById('background-video');

            var math_1 = Math.round(window.innerWidth / window.innerHeight*100)/100;
            var math_2 = Math.round(video.videoWidth / video.videoHeight*100)/100;
            if(math_1 > math_2) {
                video.style = "width: 100%"
            } else {
                video.style = "height: 100%"
            }
        }

        // Tracking resize and then recalculating
        window.addEventListener('resize', solution);
        solution()
    }
</script>
</body>
</html>
htmlcssbackgroundhtml5-video


Solution 1:[1]

Solution: wrap video into block with CSS:

    display: block;
    width: 100%;
    height: 100%;
    position: absolute;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 a-aleksandr

Related Questions