Game's scaling on Android stock browser

[postepenno]

There is a bug with game's scaling on Android stock browser after device's rotation.

I use this simple code for testing:

var App = {};App.BootState = function(game) {};App.BootState.prototype = {    preload: function()    {        this.load.image('background', 'assets/images/background.png');    },    create: function() {        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;        this.game.scale.pageAlignHorizontally = true;        this.game.scale.pageAlignVertically = true;        this.game.scale.setScreenSize(true);        this.add.sprite(0, 0, 'background');    },    render: function()    {        game.debug.text("isPortrait: " + game.scale.isPortrait, 20, 100 );        game.debug.text("isLandscape: " + game.scale.isLandscape, 20, 120 );        game.debug.text("orientation: " + game.scale.orientation, 20, 140 );    }};

Testing device: Samsung Galaxy Note 2, android 4.3.

 

At launch everything looks fine

 

Still fine after first device's rotation

 

But after some more rotations some weird stuff happens. It may show isPortrait = true even if device is in lanscape mode.

 

Or there can be mess with scaling and positioning:

 

I was told that there is the same problem on other device - Samsung Galaxy S3. I guess this is a common problem for all android stock browsers. Is there any way to fix this bug?

Scale Test

Thanks in advance!

 

P.S. On chrome everything works perfect.

[haden]

I can confirm I have similar problems on Android 4.0.3 stock browser. I have a custom solution I'm using with my games that fixes a similar problem, I will test it on your code later today and if it works I will post it here.

[haden]

var App = {};App.BootState = function(game) {};App.BootState.prototype = {    preload: function() {        this.load.image('background', 'assets/images/background.png');    },    create: function() {        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;        this.game.scale.pageAlignHorizontally = true;        this.game.scale.pageAlignVertically = true;        this.game.scale.enterPortrait.add(this.rescale, this); // ADD THIS        this.game.scale.enterLandscape.add(this.rescale, this); // ADD THIS        this.game.scale.setScreenSize(true);        this.back = this.add.sprite(0, 0, 'background');    },    // ADD THIS METHOD TOO    rescale: function() {        // the game doesn't resize reight away, so we need to delay here        var _game = this.game;        setTimeout(function() {            _game.scale.refresh();        }, 200);    },    render: function() {        game.debug.text("isPortrait: " + game.scale.isPortrait, 20, 100);        game.debug.text("isLandscape: " + game.scale.isLandscape, 20, 120);        game.debug.text("orientation: " + game.scale.orientation, 20, 140);    }};

I marked the lines I added, this should fix the orientation scaling problems. Let me know if this works for you.

[postepenno]

Thanks for the suggestion, it works more stable now!

Unfortunately sometimes there is a problem with scaling in portrait mode:

 

So, I commented this line

//this.game.scale.enterPortrait.add(this.rescale, this); // ADD THIS

And everything works great even after 20+ rotations.

I guess this is a hack for my specific phone and on other device or android version might be a different situation, but at least it works in current specific case. So, if a client asks about scaling issues in stock browser, I know which lines to tweak.

Thanks for the help! 

[morosenerd]

I had the same problem, and just as haden did, I "solved" it by waiting (although I do setInterval instead, wait a couple times while checking if window.innerWidth is changing, and then remove the interval when it's stable).

 

I looked at ScaleManager.js to track the problem, but I'm afraid I don't fully understand it. There seems to be a bit of code that tries to set an interval too, but I completely don't get why this bit is here:

//in function setScreenSize if (force || window.innerHeight > this._startHeight || this._iterations < 0) {      //more code      this.setSize();      clearInterval(this._check);      this._check = null; }

What's the purpose of window.innerHeight > this._startHeight ?