After rotating my iOS device, Google Chrome version 104 seems to be reporting incorrect values for window.innerWidth and window.innerHeight. The discrepancy is noticeable when comparing the dimensions before and after rotation:
- Initially in portrait mode:
414 x 714. - After rotating to landscape and back to portrait:
390 x 334
To test this issue, I have provided a snippet below. It may require a few attempts before the incorrect values start appearing:
const $ = document.getElementById.bind(document);
const w1 = $("w1");
const h1 = $("h1");
const w2 = $("w2");
const h2 = $("h2");
// Get width/height on page load
w1.innerText = `w: ${window.innerWidth}`;
h1.innerText = `h: ${window.innerHeight}`;
// Get width/height on resize event
function onResizeInstant() {
w2.innerText = `w: ${window.innerWidth}`;
h2.innerText = `h: ${window.innerHeight}`;
}
window.addEventListener("resize", onResizeInstant);body{font-family: sans-serif}
h1{font-size: 16px}
div{
font-size: 16px;
height: 20px;
background: #eee;
margin-bottom: 2px;
}<h1>window.innerWidth + Height on initial page load</h1>
<div id="w1"></div>
<div id="h1"></div>
<h1>window.innerWidth + Height after rotating device</h1>
<div id="w2"></div>
<div id="h2"></div>This issue does not occur with iOS Safari, Chrome Android, Firefox, or any desktop browsers. It appears to be specific to Google Chrome on iOS. If anyone knows what might be causing this behavior or has a workaround for this bug, please share your insights.