Depth problem on mobile safari

Hello all! I’m new to PhaserJS, I’m building an isometric game and I’m getting some strange behaviour on Safari mobile about the depth of the second layer of the map, basically the sprites are placed under the first layer rather than on top. I’m experiencing this on Chrome in Development mode with an iOS device set, while any Android devices works good.
Android
Screenshot 2023-05-09 alle 07.25.49

iOS
Screenshot 2023-05-09 alle 07.26.16

Here’s the code of the scene to render the map

const mapData = [
            [
                [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 98],
                [5, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 98],
                [5, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 0, 98],
                [5, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 98],
                [5, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 98],
                [5, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 0, 98],
                [5, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 98],
                [5, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 98],
                [5, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 0, 98],
                [5, 93, 93, 93, 93, 95, 93, 93, 93, 93, 95, 93, 93, 93, 93, 95, 93, 93, 93, 93, 98],
                [5, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 95, 98],
                [5, 93, 93, 93, 93, 95, 93, 93, 93, 93, 95, 93, 93, 93, 93, 95, 93, 93, 93, 93, 98],
                [5, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 0, 98],
                [5, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 98],
                [5, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 98],
                [5, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 0, 98],
                [5, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 98],
                [5, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 98],
                [5, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 0, 98],
                [5, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 95, 93, 0, 0, 93, 98],
                [99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 97],
            ],
            [
                [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
                [null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null],
                [null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 94, null],
                [null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null],
                [null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null],
                [null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 94, null],
                [null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null],
                [null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null],
                [null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 94, null],
                [null, 92, 92, 92, 92, null, 92, 92, 92, 92, null, 92, 92, 92, 92, null, 92, 92, 92, 92, null],
                [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
                [null, 92, 92, 92, 92, null, 92, 92, 92, 92, null, 92, 92, 92, 92, null, 92, 92, 92, 92, null],
                [null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 94, null],
                [null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null],
                [null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null],
                [null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 94, null],
                [null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null],
                [null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null],
                [null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 94, null],
                [null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null, 92, null, null, 92, null],
                [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
            ],
        ];
const tiles = [];
        for (let y = 0; y < mapHeight; y++) {
            tiles.push([]);
            for (let x = 0; x < mapWidth; x++) {
                const tx = (x - y) * tileWidthHalf;
                const ty = (x + y) * tileHeightHalf;
                const tileId = mapData[0][y][x];

                const tile = this.add.image(centerX + tx, centerY + ty, `tile${tileId}`);
                tile.depth = centerY + ty;
                tiles[y].push(tile);
            }
        }

        // This is the second layer, the one which doesn't show up on Safari Mobile
        for (let y = 0; y < mapHeight; y++) {
            for (let x = 0; x < mapWidth; x++) {
                const t = tiles[y][x];
                const tileId = mapData[1][y][x];

                if (tileId !== null) {
                    const sprite = this.add.sprite(t.x, t.y + 27, `tile${tileId}`);
                    sprite.setOrigin(0.5, 1);
                    sprite.depth = t.centerY;
                }
            }
        }

Thanks!

Any clue? Thanks!

Log this.game.device.features.stableSort to see if there’s any difference.

Also maybe compare the display contents:

this.events.once('render', () => {
  console.log(this.sys.displayList.getChildren().map((c) => [c.type, c.depth]));
});

Setting this.game.device.features.stableSort = true solved the problem! Thank you very much!