Odd issue with resizing renderer - innerWidth and innerHeight not returning the correct values

[bildha]

My app uses a renderer that spans the entire height and width of the browser and is completely responsive to its size. On desktop the renderer resizes fine as I resize the browser. I can also open up the dev tools in Chrome and switch to responsive view and the renderer will resize correctly. However, once I emulate a mobile device such as the iPhone 6s (or check it using a physical one) the values returned by window.innerHeight and window.innerWidth come back incorrect. Height will sometimes be tripled, for example. Even stranger, on page load when emulating the iPhone 6s in landscape mode, everything looks fine. Once I change the orientation to portrait or load the page on portrait, it's broken!

Here's how I initialize the canvas:

stage = new Container();
renderer = new PIXI.CanvasRenderer({
    transparent: true,
    resolution: 1
});
PIXICANVAS.appendChild(renderer.view);

renderer.view.style.position = 'absolute';
renderer.view.style.display = 'block';
renderer.autoResize = true;
WIDTH = window.innerWidth;
HEIGHT = window.innerHeight;
renderer.resize(WIDTH, HEIGHT);

Here's the resize event:

var events = {
    getScreenParams: function() {
        WIDTH = window.innerWidth;
        HEIGHT = window.innerHeight;
        HEIGHT > WIDTH ?
            orientationIsPortrait = true :
            orientationIsPortrait = false;
    },

    windowResize: function() {
        setTimeout(function() {
            events.getScreenParams();
            renderer.resize(WIDTH, HEIGHT);
            events.getBreakpoints();
            events.updateAllSprites();
        }, 250);
    },

    ...
}

Here's the listener:

window.addEventListener('resize', debounce(events.windowResize, 50), false);

Anyone else experience this issue?

 

 

[xerver]

Not sure why innerWidth/innerHeight would be wrong (I'm not a mobile dev), but I would recommend not using innerWidth/innerHeight anyway (see #3 here: https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html)

Maybe try this:

• Ensure autoResize is set to `false`
• Use CSS to style the canvas to 100% width/height (remember to make html/body/canvas parent have 100% height too)
• Call renderer.resize() with the values of canvas.clientWidth and canvas.clientHeight

[bildha]

1 hour ago, xerver said:

Not sure why innerWidth/innerHeight would be wrong (I'm not a mobile dev), but I would recommend not using innerWidth/innerHeight anyway (see #3 here: https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html)

Maybe try this:

• Ensure autoResize is set to `false`
• Use CSS to style the canvas to 100% width/height (remember to make html/body/canvas parent have 100% height too)
• Call renderer.resize() with the values of canvas.clientWidth and canvas.clientHeight

Thanks for the response, Xerver. I did as you said and it works as it should in chrome (both with and without the dev tools open, and while emulating devices)... however, I'm still seeing an issue on my physical iPhone where the document body (or possibly the canvas?) is sized correctly in portrait orientation but as soon as I switch to landscape, the body extends above the window and into the safari's search bar and tab bar. So close!