I'm testing on an iPhone XS, iOS 15.6.1
Seems to work on iOS Safari (untested on Android) but I'm having an issue in Chrome when I rotate the screen from landscape to portrait, the content appears to be cropped to the previously viewport height of landscape mode.
I found this bug on Google Support. However I don't believe this is the issue as the examples given in that post don't appear to have the issue anymore.
My issue is possibility due to the fact I use javascrip to set the height of the html/body/container elements due to a known issue with 100vh viewport issue in conjunction with the URL bar (and it resizing). Although the inline value updates when resizing the browser, maybe it's not doing so on orientation change on iOS Chrome?
Could/should I use something like the code below, to run again if the device is rotated?
window.addEventListener("orientationchange", (event) => {
console.log(`the orientation of the device is now ${event.target.screen.orientation.angle}`);
});
const documentHeight = () => {
const doc = document.documentElement
doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', documentHeight)
documentHeight()/**
* Base `body` styling.
*
* 1. Fix for viewport height/address bar issue on iOS Safari. The height of the
* container is set with javascript.
* 2. As we have `overflow: hidden` on the `html` element, we allow the page to
* overflow on smaller viewports below hiding again on wider viewports.
*/
html {
height: 100vh;
height: var(--doc-height); /* [1] */
overflow: hidden; /* [2] */
}
/**
* Base `body` styling.
*
* 1. Fix for viewport height/address bar issue on iOS Safari. The height of the
* container is set with javascript.
*/
body {
height: 100vh;
height: var(--doc-height); /* [1] */
margin: 0;
padding: 0;
}
/**
* Grid
*
* 1. Fix for viewport height/address bar issue on iOS Safari. The height of the
* container is set with javascript.
*/
.grid {
background: red;
height: 100vh;
height: var(--doc-height);
}<html>
<body>
<div class="grid"></div>
</body>
</html>
A workaround that worked for me was...