For some reason when I open my game on mobile (tried Chrome, Brave, and Brave on Private tab) the graphic of one specific sprite sheet appears as only black. I am not sure what could possibly cause this issue.

This is how I create my sprite: character.sprite = this.add.sprite(400, 400, "chara", "idle_0");

All my other sprites, which I created the same way work just fine and this one used to work fine until today.

There are two major changes I can think of which I did since the graphics last worked: -the Spritesheet has gotten significantly bigger (added some large animations) -I added some transition tweens the following way:

function init_trans(scene) {

trans.maskGfx = scene.add.graphics()
    .fillCircleShape(trans.maskShape)
    .generateTexture('mask');

scene.mask = scene.add.image(0, 0, 'mask')
.setPosition(
    gameState.gameWidth / 2,
    gameState.gameHeight / 2,
);

scene.cameras.main.setMask(new Phaser.Display.Masks.BitmapMask(scene, scene.mask));

let propertyConfig = {
    ease: 'Quint.easeOut',
    from: trans.max_scale,
    start: trans.max_scale,
    to: trans.min_scale,
};

trans.out = scene.tweens.add({
    duration: 1000,
    scaleX: propertyConfig,
    scaleY: propertyConfig,
    targets: scene.mask,
    paused: true,
}); 

propertyConfig = {
    ease: 'Quart.easeOut',
    from: trans.min_scale,
    start: trans.min_scale,
    to: trans.max_scale,
};

trans.in = scene.tweens.add({
    duration: 1000,
    scaleX: propertyConfig,
    scaleY: propertyConfig,
    targets: scene.mask,
    paused: true,
});
}

If anyone knows what could cause this issue, help is greatly appreciated, especially since I have a hard time debugging things on mobile.

Update & possible fix:

Upon further investigation the issue seems to have been the spritesheet. I split it into two and that fixed the issue. However if anyone has a more educated explenation on why that was and maybe even an alternative solution, I welcome them.