# Pixel error / flicker effect on mobile browser

**URL:** <https://phaser.discourse.group/t/pixel-error-flicker-effect-on-mobile-browser/9789>\
**Category:** Phaser 3\
**Created:** [June 16, 2021, 12:17pm UTC](https://phaser.discourse.group/t/pixel-error-flicker-effect-on-mobile-browser/9789 "2021-06-16T12:17:16Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Puccini](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/puccini/32/4984_2.png) [@Puccini](https://phaser.discourse.group/u/Puccini)\
**Post date:** [June 16, 2021, 12:17pm UTC](https://phaser.discourse.group/t/pixel-error-flicker-effect-on-mobile-browser/9789/1 "2021-06-16T12:17:16Z")

</div>

Hi there,

if got some strange pixel erros on my mobile device if i acces my game.

Here is a screenshot of the pixel errors ( this button is a container with 2 images on left / right and in mid a tilesprite. it seems like the tilesprite having this error… )

![PixelError](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/0/0a18965d1242fed9b0b0a93f46e7a293e003de06.jpeg)

And here is a screen recording that shows the pixel flicker effect on a other tilesprite… (hope video is playable):

[https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/eaa810ad964486341b32610ffd067cd619a45771.mp4](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/eaa810ad964486341b32610ffd067cd619a45771.mp4)

What is causing this behavior? Some sort of scaling issue?  
Mobile device is a android Mi9 with Chrome browser

Thx a lot!

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [June 18, 2021, 2:24pm UTC](https://phaser.discourse.group/t/pixel-error-flicker-effect-on-mobile-browser/9789/2 "2021-06-18T14:24:56Z")

</div>

You might add an issue for that, especially if you can make a test case.

---

<div class="post-metadata">

**Author:** ![Puccini](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/puccini/32/4984_2.png) [@Puccini](https://phaser.discourse.group/u/Puccini)\
**Post date:** [June 21, 2021, 6:59am UTC](https://phaser.discourse.group/t/pixel-error-flicker-effect-on-mobile-browser/9789/3 "2021-06-21T06:59:43Z")

</div>

Hi samme,

i was able to reproduce the behavior in this small fiddle:  
[https://jsfiddle.net/ragesoft/tjv23b4k/](https://jsfiddle.net/ragesoft/tjv23b4k/)

Use this link on a mobile phone to eliminate the jsfiddle gui:  
[https://jsfiddle.net/ragesoft/tjv23b4k/show](https://jsfiddle.net/ragesoft/tjv23b4k/show)

The problem occures on my mobile devices as soon as the background is visible.  
The button in the dialog starts flickering on the right side with some blue pixels…

So it seems to me like some sort of overlapping / rendering problem… ☹

How to fix this?

Greetings,  
Puccini

PS:  
I’ve just added a fullscreen toggle button, but it seems not to work on mobile -.-…

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [June 22, 2021, 1:19pm UTC](https://phaser.discourse.group/t/pixel-error-flicker-effect-on-mobile-browser/9789/4 "2021-06-22T13:19:58Z")

</div>

Is it

> <https://github.com/photonstorm/phaser/issues/5659>
>
> I have a game with several background tilesprites, some tileset layers, as well …as a few sprites and text objects on screen. I am seeing a blue artifact effect appear at various locations on the screen. I'm using Phaser v3.54.0, and I've tested also reproduced the effect with other versions (I went backward until 3.2x, where the code no longer ran).
> 
> Unfortunately my phone security settings forbid screenshots, but here's what it looks like:
> 
> !\[image\](https://user-images.githubusercontent.com/11262221/114978872-c5e1c280-9e3e-11eb-8226-b5eafa59688e.png)
> 
> Here's a summary of the effect:
> 
> • Occurs on Android devices (haven't tried iPhone), not on desktop (even in mobile mode)
> • Appears in all Android browsers (tried 3 different Android phones)
> • Only occurs in WEBGL, not in CANVAS
> • Tends to occur along edges of sprites, text, and tiles (shooting a fireball causes the effect to appear all around the player)
> • Appears at predictable times and locations (i.e. the same places and times every playthrough, other things constant)
> • Changing camera and game object properties (depth, alpha, position) causes the effect to appear at different times and in different locations 
> 
> After removing everything I could while retaining the effect. I was left with the code below. Here's a summary of what I've found in this example:
> 
> • Removing the tilesprites, tilemap layer, images, or text objects causes the effect to disappear
> • Failing to preload the background images or player sprite has no impact, but failing to preload the card images, or changing their image source, changes or removes the effect
> • Changing the background tilesprite size or location has no effect
> • Changing the tilemap size or content has no effect
> 
> Here is the example code:
> 
> var \_game = {
> mapIndex: null,
> platforms: null,
> player: null
> };
> 
> \_game.playScene = new Phaser.Scene('play');
> 
> var config = {
> type: Phaser.AUTO,
> parent: 'game',
> width: 450,
> height: 800,
> pixelArt: true, // Removing pixelArt changes the artifact pattern
> scale: {
> },
> scene: \[
> \_game.playScene
> \],
> physics: {
> default: 'arcade',
> arcade: {
> debug: \_game.debugging
> }
> }
> };
> 
> \_game.game = new Phaser.Game(config);
> 
> \_game.game.scene.start('play', { map: 0 });
> 
> \_game.playScene.init = function(data) {
> \_game.mapIndex = data.map;
> };
> 
> \_game.playScene.preload = function() {
> this.load.image('cloudback', 'img/CloudsBack.png');
> this.load.image('cloudfront', 'img/CloudsFront.png');
> this.load.image('bgback', 'img/BGBack.png');
> this.load.image('bgfront', 'img/BGFront.png');
> 
> this.load.image('tileset', 'img/Tileset.png');
>     
> this.load.tilemapCSV('map\_platforms' + \_game.mapIndex, 'lib/' + \_game.mapIndex + '\_Platforms.csv');
>     
> this.load.image('cardJump', 'img/CardJump.png');
> this.load.image('cardAttack', 'img/CardAttack.png');
> this.load.image('cardMagic', 'img/CardMagic.png');
> this.load.image('cardDash', 'img/CardDash.png');
> 
> this.load.spritesheet('adventurer', 'img/Adventurer.png', { frameWidth: 50, frameHeight: 37});
> };
> 
> \_game.playScene.create = function() {
> this.cloudback = this.add.tileSprite(0, 0, 100, 100, 'cloudback');
> this.cloudfront = this.add.tileSprite(0, 0, 100, 100, 'cloudfront');
> this.bgback = this.add.tileSprite(0, 0, 100, 100, 'bgback');
> this.bgfront = this.add.tileSprite(0, 0, 100, 100, 'bgfront');
> 
> var map\_platforms = this.make.tilemap({ key: 'map\_platforms' + \_game.mapIndex, tileWidth: 16, tileHeight: 16 });
> var pl\_tileset = map\_platforms.addTilesetImage('tileset');
> 
> var pl\_layer = map\_platforms.createLayer(0, pl\_tileset, 0, 0);
> 
> \_game.player = this.physics.add.sprite(10, 200, 'adventurer');
> 
> this.cardJump = this.add.sprite(60, 555, 'cardJump')
> this.cardAttack = this.add.sprite(180, 555, 'cardAttack')
> this.cardMagic = this.add.sprite(300, 555, 'cardMagic')
> this.cardDash = this.add.sprite(420, 555, 'cardDash')
> 
> var cardJump = this.add.text(115, 112, 9);
> var cardAttack = this.add.text(171, 112, 9);
> var cardMagic = this.add.text(227, 112, 9);
> var cardDash = this.add.text(283, 112, 9);
> };
> 
> Thanks for your time!
> 
> Duncan Priebe

?

---

<div class="post-metadata">

**Author:** ![Puccini](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/puccini/32/4984_2.png) [@Puccini](https://phaser.discourse.group/u/Puccini)\
**Post date:** [June 23, 2021, 6:11am UTC](https://phaser.discourse.group/t/pixel-error-flicker-effect-on-mobile-browser/9789/5 "2021-06-23T06:11:28Z")

</div>

Oh great! Thx. This seems to be the correct problem 🙂  
And as mentioned: with “CANVAS” rendering the error is gone:  
[https://jsfiddle.net/ragesoft/5csw3nmt/4/](https://jsfiddle.net/ragesoft/5csw3nmt/4/)

🙂