add.text renders with wrong y-coordinate

[michaelmcleodnz]

Version

• Phaser Version:
  3.53.1

• Operating system:
  Windows 10

• Browser:
  Firefox 86.0.1

Description

this.add.text(0, 0, 'Text') renders the text about halfway down the canvas on Firefox.

Example Test Code

e.g.,
https://labs.phaser.io/edit.html?src=src/scenes/ui%20scene.js&v=3.53.1
This issue happens each time the page is refreshed, but somehow fixes itself when the 'Run Code' button is pressed.

It also happens consistently with the code in the Making your first game tutorial.

Additional Information

Happens in both WebGL mode and Canvas mode.

[photonstorm]

Just updated Firefox to v87 on my Mac and cannot replicate this:

Do you have any security plugins installed? Or settings that would prevent it from being able to scan a canvas? As that is what Phaser does internally - it writes the text to a canvas and then scans the pixels to get the font height from it. If this doesn't return a sensible value, you'd likely see what you're seeing on your system.

However, this doesn't appear to be the default case for Firefox, at least not on Mac OS (will test on Windows 10 later today)

[telinc1]

If it's any use, this was brought up on the forums a few days ago, where it worked on Firefox 86.0.1 on Windows 10, but was broken elsewhere.

Considering it (supposedly) breaks on Brave and Tor, I also suspect it's a security flag/plugin, but haven't been able to confirm anything.

[michaelmcleodnz]

Sorry about that, I can confirm that if I turn off the extension "DuckDuckGo Privacy Essentials", the text renders in the correct place.

I have also found that this issue actually happens on any browser where "DuckDuckGo Privacy Essentials" is enabled.

The extension doesn't report that it has blocked anything, but it is clearly the culprit because everything renders correctly when I disable it.

The site https://coli.prushka.fr/ mentioned on the forums is another example of this happening.

[telinc1]

I checked the extension. It messes with the canvas API, specifically getImageData. This is probably what breaks text rendering. Unless you whitelist the game's site, I don't think there's anything you can do about it.

[michaelmcleodnz]

Yeah, I'm personally fine with this issue now that I know how to fix it.

From the blame and their comments on a recent issue, it looks like they just added this in the last month as part of 'fingerprint protection', and they might even fix it so that this works correctly in the future. I would raise an issue there, but I'm not sure exactly how to describe it.

[photonstorm]

This issue has been mentioned on Phaser. There might be relevant details there:

https://phaser.discourse.group/t/text-positions-in-chrome-out-of-whack/9042/5

[photonstorm]

Thanks for updating me with your findings. Going to close this as I don't believe it's possible (or, indeed, our responsibility) to handle this Phaser-side, sorry. You could likely avoid it entirely by making use of the Text Metrics option in Phaser, so it skips the canvas image scan entirely.

[muzzwood]

I was getting the same issue. Can also confirm disabling DuckDuckGo Privacy Essentials extension fixed it.
Pop_OS! 20.10, Firefox 87.0

[photonstorm]

This issue has been mentioned on Phaser. There might be relevant details there:

https://phaser.discourse.group/t/game-does-not-display-correctly-when-published/10039/6