Currently, I am conducting testing on an iPhone XS running iOS 15.6.1
The website seems to function properly on iOS Safari (although untested on Android), however, a problem arises when using Chrome and rotating the screen from landscape to portrait mode. It appears that the content is cropped to the previous viewport height of landscape mode.
I came across this reported bug on Google Support, but it seems that the examples provided in that thread no longer exhibit the same issue.
My suspicion is that the issue may be related to my use of JavaScript to set the height of the html/body/container elements as a workaround for the known problem with the 100vh viewport issue when the URL bar resizes. While the inline value does update upon resizing the browser window, it might not do so correctly during orientation changes on iOS Chrome.
Should I implement something like the code snippet below, to trigger a script when 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>