iOS Chrome yields incorrect window.innerWidth and innerHeight

Question

Google Chrome version 104 on iOS reports incorrect window.innerWidth and window.innerHeight values after I rotate my device. For example:

I load my page on portrait mode, and I get 414 x 714.
I rotate my phone to landscape, then back to portrait mode, and I get 390 x 334

I've created a snippet below to test. It might take 3 attempts before the wrong values start showing up:

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 does not happen on iOS Safari, Chrome Android, Firefox, or any desktop device. It only happens in Google Chrome for iOS. Does anybody know the source of this behavior, or a workaround to this bug?

for me, on an iPhone 13 Mini on iOS 16.6, the correct values do not compute immediately after changing orientation, even on the first orientation change. the workaround in my case was to use `setTimeout(()=>{},N)`, whereby the value of `N` seems to vary based on the code that is to be executed, for any code that depends on accurate `innerWidth` and `innerHeight` values — oldboy, Aug 19 '23 at 02:28

score 2 · Accepted Answer · answered Aug 25 '22 at 20:55

This is definitely a bug only with Google Chrome in iOS. The solution is to add a short setTimeout() before reading the window.innerWidth and window.innerHeight values.

const $ = document.getElementById.bind(document);

const w1 = $("w1");
const h1 = $("h1");
const w2 = $("w2");
const h2 = $("h2");

// Called instantly on resize event
// Could yield incorrect values on Google Chrome on iOS at random
function onResizeInstant() {
  w1.innerText = `w: ${window.innerWidth}`;
  h1.innerText = `h: ${window.innerHeight}`;
  window.setTimeout(onResizeTimeout, 5);
}

// Called after 5ms timeout
// Will yield accurate values
function onResizeTimeout() {
  w2.innerText = `w: ${window.innerWidth}`;
  h2.innerText = `h: ${window.innerHeight}`;
}

window.addEventListener("resize", onResizeInstant);

// Call on load
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 before setTimeout()</h1>
<div id="w1"></div>
<div id="h1"></div>

<h1>window.innerWidth + Height after setTimeout()</h1>
<div id="w2"></div>
<div id="h2"></div>

Results:

it seems this bug has existed for years despite the fact that google said they fixed it a couple years ago... :/ — oldboy, Aug 19 '23 at 02:31

iOS Chrome yields incorrect window.innerWidth and innerHeight

1 Answers1