Android google chrome give strange values on innerWidht/Height upon rotation and canvas resizing

I get strange values of the innerWidth and innerHeight on my android device, using chrome.

The minimal code below exposes it.

<canvas id="canvas"></canvas> window.onresize = function() { let ScreenWidth = window.innerWidth; let ScreenHeight = window.innerHeight; console.log("w: " + ScreenWidth); console.log("h: " + ScreenHeight); let canvas = document.getElementById('canvas'); // Woa! This is the mischief. canvas.style.width = ScreenWidth + "px"; canvas.style.height = ScreenHeight + "px"; }; // Dispatch the event. window.dispatchEvent(new Event('resize'));

So, I have an empty html page with a canvas element. Code is asking for innerWidth and innerHeight and set the canvas css style widht and height to it, so it fill up the entire page. Simple and straight forward. Works fine on a pc.

Now to the issue. The first forced resize-event is just to make the canvas re-scale immediately. My values in the console.log() are 360, 649.

When I rotate the phone, the event is dispatched again and the values are 705, 274. Somewhat different due to the browsers header (adress bar) but reasonable values.

Rotating it back again! Now the values are 705, 1271. I expected them to be back to 360, 649.

What is happening?! If I remove the lines changing the canvas w and h, the "bug" is gone and rotating the phone back and forth switches correctly between 360, 649 and 705, 274.

Can it be due to me setting the canvas width to 705 upon rotation? But the innerWidth are supposed to reflect the actual viewport, not the content width, or am I reading the docs wrong?

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth