Game is scaled incorrectly in an iframe

Phaser 3
1

My game is embedded in an iframe and is sometimes scaled incorrectly, after resizing the window it is scaling correctly.

This is my scale configuration:

scale: {
    parent: 'app',
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: 772,
    height: 480
}

Before creating an issue on GitHub, I wanted to ask if there is a solution for it or if I am just using it incorrectly.

I would appreciate any help.

2

Use and screenshot:

1 Like
3

Sure, here’s a screenshot.

image

4

Can you show the whole page? And before and after the “correct” resizing?

5

The game is in an iframe with the same size (772x480). Hope that’s enough.

Correct:

image

Incorrect:

image

6

Still need help. Any idea why this is happening?

7

No, but you can try updating Phaser and see if it helps.

If not try

new Phaser.Game({
  callbacks: {
    postBoot: function (game) {
      game.scale.refresh();
    },
  },
});
8

Phaser is already the latest version, but the callback looks promising. I’ll try it, thank you.