Scale problem in FIT mode

Hi,

i’m using Phaser 3.53.1 version:

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.53.1/phaser-arcade-physics.min.js"></script>

I have a scale problem:

Here is my code:

The phaser configuration

// Configuration constants

const tileWidth = 128;

const nbTileGameWidth = 18;

const nbTileGameHeight = 7;

const gameWidth = nbTileGameWidth * tileWidth;

const gameHeight = nbTileGameHeight * tileWidth;

var config = {

    type: Phaser.AUTO,

    scale: {

        mode: Phaser.Scale.FIT,

        parent: 'phaser-game', // Attached DOM element

        width: gameWidth,

        height: gameHeight

    },

    physics: {

        default: 'arcade',

        arcade: {

            gravity: { y: 300 },

            debug: false

        }

    },

};

game = new Phaser.Game(config);

The HTML code:

<div class="container-fluid" style="height: 100vh">
    <div class="row h-100">

        <div class="col-4 bg-dark h-100 border-end border-2 d-flex flex-column" >
             Something
        </div>
        <div class="col-8 h-100 d-flex flex-column">
           <div class="row border-bottom border-2">

                <div class="col p-0 m-0 bg-dark">

                    <div id="phaser-game"></div>

                </div>

            </div>


            <div class="row border-bottom border-2 bg-dark" style="height: 9%">

                <div class="col h-100  m-0 p-0">

                    <div class="row h-100 m-0 p-0">

                        <div class="col-2 h-100 m-0 p-0 d-flex align-items-center">

                            <div class="d-grid gap-2 col m-0 p-1 ">


                                <button id="runButton" onclick="runIt()" class="btn btn-success"

                                    type="button" disabled>Executer</button>

                            </div>

                        </div>

                        <div class="col-2 h-100 m-0 p-0 d-flex align-items-center">

                            <div class="d-grid gap-2 col m-0 p-1 ">


                                <button id="stopButton" onclick="stopIt()" class="btn btn-primary"

                                    type="button" disabled>Arrêter</button>

                            </div>

                        </div>

                        <div class="col-8 h-100 m-0 p-0 overflow-auto " id="alertContainer"></div>

                    </div>

                </div>

            </div>


            <div class="row overflow-auto bg-dark flex-grow-1" >

                <div class="col  m-0 p-0">

                    <div class="fs-6" id="codemirror-editor"></div>

                </div>

            </div>

        </div>

    </div>

</div>

What do you think? Does anyone have any ideas?

Thanks in advance for your help!

Matthieu B

By the way, the problematic operation is the same (not resizing the game canvas) if I minimize the browser window and then switch to full screen mode (F11).
Am I in the case of a bug, and should I open a request on GitHub? or is it just a misuse from me ?

Thanks for your help,

MatthieuB