Buttons click area above the button when enabling fullscreen

[djamn]

Version

• Phaser Version: 3.80.1

• Operating system: Windows 10

• Browser: Chrome

Description

I have the following phaser config

static canvas = {
        type: Phaser.AUTO,  // Which renderer to use
        width: 1000,         // Canvas width in pixels
        height: 480,        // Canvas height in pixels
        mode: Phaser.Scale.FIT,
        parent: "preview",   // ID of the DOM element to add the canvas to
        input: {
            activePointers: 10, // Support up to 10 simultaneous touches
        },
        physics: {
            default: 'arcade',       // Which physics engine to use
            arcade: {
                gravity: { y: 1200 },
                debug: false              // paint debug information (hitboxes) ee
            }
        },
    };

In my game i initalize buttons with the following code:

createMobileButtons() {
        const jumpbutton = this.createButton(config.canvas.width - 70, config.canvas.height - 70, 'jumpbutton', () => { jump(); isJump = true }, () => isJump = false, '#000', true, false)
        this.createButton(jumpbutton.x - jumpbutton.width - 35, config.canvas.height - 70, 'firebutton', () => { shoot(); isFire = true }, () => isFire = false, '#000', true, false)

        // Left + Right Button
        const leftButton = this.createButton(config.leftRightButtonPosition, config.canvas.height - 70, 'leftbutton', () => isMovingLeft = true, () => isMovingLeft = false, '#000', true, false);
        this.createButton(config.leftRightButtonPosition + leftButton.width, config.canvas.height - 70, 'rightbutton', () => isMovingRight = true, () => isMovingRight = false, '#000', true, false);
    }

    createButton(x, y, texture, onClick, onClickFinished = null, tintColor = null, showTintForPointerClick, showTintForPointerOver) {
        const button = this.add.sprite(x, y, texture).setInteractive();
        button.setScrollFactor(0);
        button.on('pointerdown', onClick);

        if (tintColor && showTintForPointerClick) {
            button.on('pointerdown', function () { this.setTint(tintColor); });
            button.on('pointerup', function () { this.clearTint(); });
            button.on('pointerout', function () { this.clearTint(); });
        }

        if (tintColor && showTintForPointerOver) {
            button.on('pointerover', function () { this.setTint(tintColor); });
            button.on('pointerout', function () { this.clearTint(); });
        }

        if (onClickFinished) {
            button.on('pointerup', onClickFinished);
            button.on('pointerout', onClickFinished)
        }

        return button;
    }

I have implemented my fullscreen like the following:

let canvas = level.sys.game.canvas;
   let fullscreen = level.sys.game.device.fullscreen;
canvas[fullscreen.request]();

(When i use game.scale.startFullscreen(); it does not fit on mobile devices)

However my issue: When I initalize my fullscreen, the area to click the button is above the actual position of the button. I dont know how to fix that, also adding game.scale.autoCenter = Phaser.Scale.CENTER_BOTH; does not help. In my image you can see where my mouse has to be to click the button

Thanks in advance