While developing my personal website, I encountered a bug that occurs when accessing the site on my Android phone using Firefox or Chrome. The issue arises when the page initially loads correctly, but upon refreshing, the layout is displayed differently.
To address this issue, I utilized jQuery to dynamically determine the viewport size and ensure that the content is positioned accordingly below it. However, I noticed that the function seems to interpret the image height as 0, causing the content to be displayed at the very top of the page instead of beneath the image. Interestingly, if I scroll down and then scroll back up, the image correctly appears.
It's worth noting that this problem does not occur when accessing the site from my desktop, suggesting that it's specific to mobile devices.
Here is the jQuery function I used for dynamic sizing:
// This line ensures that the content is displayed below the image at either the viewport height
// or the image height, whichever is greater
var height = $(window).outerHeight() < $('.jumbotron-img').innerHeight() ? $(window).outerHeight() : $('.jumbotron-img').innerHeight();
$('#header-img-container').css('height', height);
The corresponding HTML markup is as follows:
</div>
<div id='header-img-container'>
<img src='images/site_skyline.jpg' class='img-fluid jumbotron-img'>
<h1 class='d-flex justify-content-center fixed-top' id='main-header'>My Name</h1>
</div>