Content shifts slightly on page reload with Chrome

Question

I have a div that has it's left and top offsets chosen randomly from an array of values on page load. It works for the most part, but once in a while, if you refresh, the window gets scrolled down slightly, exposing the next section, and all the content gets cut pushed very slightly to the left. Here are some screenshots of this undesired behavior. This is what the window looks like after a refresh.

Here's the code:

<div class="about-section section">

    <div class="about-section__container">
        <h2 class="section-header about-section__header">About me.</h2>

        <p class="about-section__paragraph"></p>
    </div>
...
</div>

.section {
    width: 100vw;
    height: 100vh;
    z-index: 1;
}

.about-section {
    background-image: url("../../../mountain-background.png.jpg");
    background-size: cover;
}

.about-section__container {
    position: absolute;
    display: block;
    visibility: hidden;
    left: 0;
    top: 0;
}

.about-section__header {
    color: white;
    font-size: 3.5em;
    font-family: 'Abril Fatface';
}

var title = $('.about-section__container');

var xIndex = Math.floor(Math.random() * 4);
var yIndex = Math.floor(Math.random() * 4);

var leftMargs = ['20%', '25%', '30%', '35%'];
var topMargs = ['25%', '30%', '35%', '40%'];

title.css({
    'left': leftMargs[xIndex],
    'top': topMargs[yIndex],
    'visibility': 'visible'
    });

Another thing to note is that this works perfectly in Edge and Firefox, but only Chrome produces this behavior. It seems like the offset of the text container is somehow affecting the rest of the content, as if you refresh and the text moves to a random position to the left of the previous position, everything gets shifted left, and if it moves down on refresh it causes the browser to scroll down.

Also, this only occurs if you refresh, but never on a first visit.

Is this a problem with my Javascript or is the styling of my section containers or background wrong? Or is it something with the way Chrome caches the CSS? I have no clue as to what else I could possibly try, so any help is appreciated.

Answer 1

add this in your css

.section { 
    width: 100vw; 
    height: 100vh !important; 
    z-index: 1; 
    max-width: 100%; 
}

Or You can add overflow-anchor: none; It works fine as well. I just found this link with the same issue Chrome Browser automatically scrolling