Non-RTL texts created right after an RTL text was destroyed would not be shown in latest Chromium version #7077

Version

• Phaser Version: 3.60 & 3.88 (probably reproduces on others, but these are the versions I tested)

• Operating system: Windows 10

• Browser: Chrome 134 & Edge 134 (Does not reproduce on FireFox, or on earlier versions of Chrome / Edge)

Description

Since the latest Chrome update (134, released March 2025), when a text gameobject is destroyed, if that text gameobject was RTL, and the next created game object isn't RTL, that second text gameobject would not be displayed. Example:

const rtlText1 = this.add.text(200, 100, 'Text 1', {rtl: true});
rtlText1.destroy();

const regularText2 = this.add.text(200, 200, 'Text 2'); // In Chrome / Edge, Text 2 would not be shown!

Why This Happens

The new text gameobject uses the old game object's canvas from the CanvasPool, and that canvas's dir="rtl" isn't reset.

Hacky Workaround

in Phaser's code, in Phaser.Display.Canvas.CanvasPool.create, add the line canvas.removeAttribute('dir'); after the canvas variable is populated.

Example Test Code

Expected Result: Texts 2 & 3 would be shown
Actual Result: Only Text 3 is shown

class Example extends Phaser.Scene
{
    create ()
    {
        const rtlText1 = this.add.text(200, 100, 'Text 1', {rtl: true});
        rtlText1.destroy();
        
        const regularText2 = this.add.text(200, 200, 'Text 2'); // In Chrome / Edge, Text 2 would not be shown!
        const regularText3 = this.add.text(200, 300, 'Text 3');
    }
}

const game = new Phaser.Game({
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    scene: Example
});