Phaserjs scaleManager add white strip on stage

Question

I am working with Phaser.js v2.6.2. When I try to use this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;, it adds a white strip on top of Stage area. If I remove this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; white strip is gone but stage not scaled.

I dont know what is the problem, I need some help here. Screenshot is attached.

My code is

    var game = new Phaser.Game(800, 250, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {
  game.load.image('background', 'images/gamebg1.jpg');

}

function create() {
  game.add.sprite(0, 0, 'background');
  this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  this.scale.pageAlignHorizontally = true;
  this.scale.pageAlignVertically = true;
}

function update() {
}

NOTE: It only happen in emulator view, chrome.

In the emulator view... what happens in an actual tablet/smartphone? — Pablo Lozano

Fabadiculous Fabadiculous · Accepted Answer · 2017-01-27T06:28:09

I had a similar problem. I think it has to do with the page giving margin and or padding to the html or body tags. Try adding some styling to the html and body elements, Make the margin and padding 0 like so:

  <style>
     * {
       padding: 0;
       margin: 0;
     }
  </style>

Phaserjs scaleManager add white strip on stage

1 Answers