When I view this page in Chrome on my mobile phone:
<!DOCTYPE html>
<html lang="en-au">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div style="position:fixed;bottom:0;right:0;background:#f00;width:50px;height:50px">
</div>
<div id="output">
</div>
<script>
setInterval(() => document.getElementById("output").innerHTML = `windowHeight: ${window.innerHeight}`, 37);
</script>
</body>
</html>
On first load, it looks like this:
And after tapping once on the page (anywhere), it changes to:
You can see from the red box that this also affects the positioning of position:fixed elements on the page. This was the start of my investigation, and I’ve pared down the page to get to this point, but can’t work out what I’m doing wrong!
This only happens for me on Chrome (Android), on my mobile. I’ve also tested in the responsive view of desktop browsers and I can’t get it to happen. I’m running Chrome version 111.0.5563.116 on my mobile and it’s a Huawei Y9 Prime 2019.
It also only happens on a fresh tab. If you load the page, tap once, then reload the page, the page will keep the right window.innerHeight when reloaded.
I’ve listed all these details because I’m fearing it may be some weird browser bug. Is it a bug? Is there a workaround? Or am I doing something wrong?