Text position different in Firefox

For some reason when I add text to my game, the x and y position are both off when I load it in Firefox. I’m using Firefox Developer edition. Loading it in Chrome gives me correct positioning.

Here’s the full code: https://github.com/bradydowling/phaser-ball-shoot

I’m just adding text like so:

    const soundButton = this.add.text(
      this.physics.world.bounds.width - 200,
      40,
      'Sound on',
      {
        fontFamily: 'Monaco, Courier, monospace',
        fontSize: '20px',
        fill: '#fff',
      }
    );

Here is the game config I’m using:

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 640,
  scale: {
    autoCenter: Phaser.Scale.CENTER_BOTH,
  },
  scene: [Intro, Gameplay],
  physics: {
    default: 'arcade',
  },
};

And here is the simplest scene this is happening in:

import Phaser from 'phaser';

export default class Intro extends Phaser.Scene {
  constructor() {
    super('intro');

    this.enterKey;
  }

  preload() {}

  create() {
    this.enterKey = this.input.keyboard.addKey(
      Phaser.Input.Keyboard.KeyCodes.ENTER
    );

    const middleX = this.physics.world.bounds.width / 2;
    const titleText = this.add.text(
      middleX,
      this.physics.world.bounds.height * 0.25,
      'Tip Dunk Shootout',
      {
        fontFamily: 'Monaco, Courier, monospace',
        fontSize: '40px',
        fill: '#fff',
      }
    );
    titleText.setOrigin(0.5);

    const middleY = this.physics.world.bounds.height / 2;
    const welcomeText = this.add.text(
      middleX,
      middleY,
      'Press ENTER to start gameplay',
      {
        fontFamily: 'Monaco, Courier, monospace',
        fontSize: '20px',
        fill: '#fff',
      }
    );
    welcomeText.setOrigin(0.5);
  }

  update() {
    if (this.enterKey.isDown) {
      this.scene.start('gameplay');
    }
  }
}

This issue happens with all text I try to add, in all scenes. Am I doing something wrong?

Can you screenshot?

Chrome

Firefox

Hi, I tested your game in my local and both browsers are working fine, no issues with the text.
Does it happen always?
Probably your Firefox version or local config?

1 Like

Hmm, indeed this is only happening in Firefox Developer edition. I tried disabling uBlock origin and privacy/tracking protection to see if that would fix it but it didn’t do the job. It works fine in normal Firefox 76.

I’m curious if anyone else has seen this with developer edition but glad it’s working. Thanks for the sanity check!

In a quick search I found this…

Probably something experimental with the canvas or related…

1 Like

Very good find. I didn’t see anything that’s different from default in the WebGL, Canvas, etc section. For now I’ll just use my vanilla Firefox to run it but I’ll scan through more settings later or maybe just reset all flags. Not sure if there’s a way to see all non-default flags in config so I might have to just eyeball it.