Canvas resolution increases indefinitely with window resizes.

[Maksims]

Description

On screens with non-1 maxPixelRatio, on Windows it is testable using Scaling on Display Settings, e.g. change Scale from 100% to 125%. When using Application fillMode as none and resolutionMode as auto, when changing window resolution it will unset and set style.width and height for canvas without taking maxPixelRatio into account, leading to canvas size increasing or decreasing with each resize.

I've narrowed it down to pc-bootstrap.js, method: resizeCanvas.

Steps to Reproduce

1. Create new Project
2. Open Editor
3. In project render settings change fillMode to none.
4. Launch
5. Ensure your maxPixelRatio is not 1. (You can use mobile responsive button in Chrome dev tools, or by setting non 100% scale on your Display Settings in Windows).
6. Resize window or change orientation with mobile testing

Issue: canvas width and height will increase dramatically to very large numbers. Expected: resolution to change but visually (by style) canvas to stay the same.

Solution

In pc-boostrap.js beginning of a method resizeCanvas to be updated to:

        resizeCanvas: function (app, canvas) {
            var fillMode = app._fillMode;
            var width = canvas.style.width;
            var height = canvas.style.height;
    
            canvas.style.width = '';
            canvas.style.height = '';
            app.resizeCanvas(canvas.width, canvas.height);
    
            if (fillMode === pc.FILLMODE_NONE) {
                canvas.style.width = width;
                canvas.style.height = height;
            }

[willeastcott]

So just to be totally clear, you are proposing changing this:

        resizeCanvas: function (app, canvas) {
            canvas.style.width = '';
            canvas.style.height = '';
            app.resizeCanvas(canvas.width, canvas.height);

            var fillMode = app._fillMode;

            if (fillMode == pc.FILLMODE_NONE || fillMode == pc.FILLMODE_KEEP_ASPECT) {
                if ((fillMode == pc.FILLMODE_NONE && canvas.clientHeight < window.innerHeight) || (canvas.clientWidth / canvas.clientHeight >= window.innerWidth / window.innerHeight)) {
                    canvas.style.marginTop = Math.floor((window.innerHeight - canvas.clientHeight) / 2) + 'px';
                } else {
                    canvas.style.marginTop = '';
                }
            }

            lastWindowHeight = window.innerHeight;
            lastWindowWidth = window.innerWidth;

            // Work around when in landscape to work on iOS 12 otherwise
            // the content is under the URL bar at the top
            if (this.iosVersion && this.iosVersion[0] <= 12) {
                window.scrollTo(0, 0);
            }
        },

To this:

        resizeCanvas: function (app, canvas) {
            var fillMode = app._fillMode;
            var width = canvas.style.width;
            var height = canvas.style.height;
    
            canvas.style.width = '';
            canvas.style.height = '';
            app.resizeCanvas(canvas.width, canvas.height);
    
            if (fillMode === pc.FILLMODE_NONE) {
                canvas.style.width = width;
                canvas.style.height = height;
            }

            if (fillMode == pc.FILLMODE_NONE || fillMode == pc.FILLMODE_KEEP_ASPECT) {
                if ((fillMode == pc.FILLMODE_NONE && canvas.clientHeight < window.innerHeight) || (canvas.clientWidth / canvas.clientHeight >= window.innerWidth / window.innerHeight)) {
                    canvas.style.marginTop = Math.floor((window.innerHeight - canvas.clientHeight) / 2) + 'px';
                } else {
                    canvas.style.marginTop = '';
                }
            }

            lastWindowHeight = window.innerHeight;
            lastWindowWidth = window.innerWidth;

            // Work around when in landscape to work on iOS 12 otherwise
            // the content is under the URL bar at the top
            if (this.iosVersion && this.iosVersion[0] <= 12) {
                window.scrollTo(0, 0);
            }
        },

[Maksims]

Yes.