I am experiencing an issue with a div that has left and top offsets randomly selected from an array of values upon page load. Most of the time, it works fine. However, occasionally, upon refreshing the page, the window scrolls down slightly, revealing the next section and causing all content to be shifted slightly to the left. Below are some screenshots showing this unexpected behavior. This is how the window appears after a refresh.
https://i.sstatic.net/KniPe.jpg
https://i.sstatic.net/cpEmK.jpg
Here's the code snippet:
<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'
});
One key point to mention is that this problem occurs in Chrome but not Edge or Firefox. It seems as though the text container's offset affects the rest of the content - when the text moves to a new random position upon refresh, everything shifts to the left, causing the browser to scroll down if it moves downward. Additionally, this only happens upon refreshing, not during the initial visit.
Could this issue stem from my Javascript, styling of section containers, or background settings? Or could it be related to how Chrome caches CSS? I'm unsure what else to try, so any guidance would be greatly appreciated.