Black opaque background on transparent Phaser.Text textures in Phaser 4.2.1 on older iOS WebGL #7392

Version

• Phaser Version: 4.2.1
• Operating system: iPad OS 16.4

Description

Problem
In our game Tvers (www.nrk.no/spill/tvers) we got reports from people playing on older iPads that there were black backgrounds behind out letter tiles after we upgraded to Phaser 4.2.1. We spent a lot of time trying to debug the behaviour and traced it to a division by zero issue in ApplyTint.glsl.

On older iOS devices (<= iPad OS 16.4), Phaser Text objects with black fill rendered on top of a transparent background show as black rectangles with faint aliased edges. On newer devices the transparency works as expected. In Phaser 3.8 this was not a problem.

Cause

The WebGL tint shader (ApplyTint.glsl) performs an unpremultiply of the text texture:

vec3 unpremultTexture = texture.rgb / texture.a;

Outside the character glyph, the canvas-generated texture stores pixels with RGB = 0 and alpha = 0. Dividing zero by zero results in undefined behavior (NaN or Infinity). How the shader handles that NaN varies between GPUs/drivers. On the affected devices it propagates, producing a visible opaque black rectangle instead of transparent.

Fix

Guard the division by returning early for zero-alpha texels:

if (texture.a <= 0.0) {
return vec4(0.0);
}
vec3 unpremultTexture = texture.rgb / texture.a;

Example Test Code

const textStyling = {

  fontSize: '80px',

color: 'black',

fontFamily: 'sans-serif',

fontStyle: 'bold',

padding: { x: 10, y: 10 },

}

const background = this.scene.add

      .image(0, 0, 'tile')

      .setTint(palette.boardSquare)

      .setTintMode(Phaser.TintModes.FILL)

const letter = this.scene.add.text(0, 0, this.letter, textStyling)

Phaser.Display.Align.In.Center(letter, background)