Strange rendering issues

version: ^3.87.0

Description

I set a text in the page with no background, but it's inexplicably has a black background.

this is my code:

    // render out the player health bar
    const playerHealthBar = new HealthBar(this, 34, 34);
    const playerMonsterName = this.add.text(30, 20, MONSTER_ASSET_KEYS.IGUANIGNITE, {
      color: '#7E3D3F',
      fontSize: '32px',
    });
    this.add.container(556, 318, [
      this.add.image(0, 0, BATTLE_ASSET_KEYS.HEALTH_BAR_BACKGROUND).setOrigin(0),
      playerMonsterName,
      playerHealthBar.container,
      this.add.text(playerMonsterName.width + 35, 23, 'L5', { // this line
        color: '#ED474B',
        fontSize: '28px',
      }),
      this.add.text(30, 55, 'HP', {
        color: '#FF6505',
        fontSize: '24px',
        fontStyle: 'italic',
      }),
      this.add
        .text(443, 80, '25/25', {
          color: '#7E3D3F',
          fontSize: '16px',
        })
        .setOrigin(1, 0),
    ]);

You can see in the image above that L5 appears to have an inexplicable black background. And when I do replace the code for HP and L5, the black background appears for HP and not for L5. Why is this? I've tried many things and can't find the problem.

    // render out the player health bar
    const playerHealthBar = new HealthBar(this, 34, 34);
    const playerMonsterName = this.add.text(30, 20, MONSTER_ASSET_KEYS.IGUANIGNITE, {
      color: '#7E3D3F',
      fontSize: '32px',
    });
    this.add.container(556, 318, [
      this.add.image(0, 0, BATTLE_ASSET_KEYS.HEALTH_BAR_BACKGROUND).setOrigin(0),
      playerMonsterName,
      playerHealthBar.container,
      this.add.text(30, 55, 'HP', { // this line
        color: '#FF6505',
        fontSize: '24px',
        fontStyle: 'italic',
      }),
      this.add.text(playerMonsterName.width + 35, 23, 'L5', {
        color: '#ED474B',
        fontSize: '28px',
      }),
      this.add
        .text(443, 80, '25/25', {
          color: '#7E3D3F',
          fontSize: '16px',
        })
        .setOrigin(1, 0),
    ]);

this is my code: https://github.com/vladilen11/monster-demo/blob/main/apps/web/game/scenes/battle-scene.ts#L44-L68
you can test it with this repo.

Run the linked monster-demo repository and inspect apps/web/game/scenes/battle-scene.ts around lines 44-68, where the text objects are created and placed in the container. Reproduce the rendering with the L5 and HP entries swapped, then trace the relevant Phaser text-rendering path; done means both labels render without an unexpected black background.