Jump to content

Annoying full screen problem on Android Firefox


Recommended Posts

I've been trying to squash an annoying situation where the full screen mobile template messes up on Firefox on Android.


I found another game that's set up basically as mine: http://gamepyong.com/ints/ints.php

It has the same problem. I'm having this issue in both 2.04 and 2.05.


SO - what's the issue? Well, the javascript seems to think the game, or the webpage is/should be larger than the game's height. So it pushes the game down 10/20 pixels, and then if you touch that area you can scroll down.

Since you then can scroll down, the page is never stationary; you can touch and drag the page which ruins many games basically.


I'm seeing this problem on a Samsung Galaxy Tab, SM-T310 Android 4.2.2

Any idea on where to start to troubleshoot this? 


Pic of the problem, notice the black bar under the nav bar, it should not be there:



Link to comment
Share on other sites

I managed to solve this after much hair tearing :)


I was using the full screen mobile template as you know. That uses an IIFE to trigger the boot of the game. Instead, I put it in a function which runs on <body onload="startGame">

That gives the browser the needed time to get its shit together, so this is solved with that.


Trivial in one way - but significant in that without it, games that uses dragging gestures are ruined in Android Firefox without this fix.



Sorry,  I was too early on the trigger, this was due to something else. I could only get the problem to go away by making sure that I set up all my screen settings in the preload function of the Boot state rather than in the create function.
Also, I needed to make sure I ended the section with a call to game.scale.refresh();
So, for example, my Boot state's preload function is now:
preload: function () {        //  Here we load the assets required for our preloader (in this case a background and a loading bar)        this.load.image('preloader-bg', 'img/preloader-bg.png');        this.load.image('preloader-bar', 'img/preloader-bar.png');        this.load.image('pplogo', 'img/pplogo.png');        if (this.game.device.desktop)        {            this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;            this.game.scale.minWidth = 320;            this.game.scale.minHeight = 480;            this.game.scale.maxWidth = 800;            this.game.scale.maxHeight = 1200;            this.game.scale.pageAlignHorizontally = true;            this.game.scale.pageAlignVertically = true;            this.game.scale.setScreenSize(true);        }        else        {            this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;            this.game.scale.minWidth = 277;            this.game.scale.minHeight = 416;            this.game.scale.maxWidth = 640;            this.game.scale.maxHeight = 960;            this.game.scale.pageAlignHorizontally = true;            this.game.scale.pageAlignVertically = true;            this.game.scale.forceOrientation(false, true);            this.game.scale.hasResized.add(this.gameResized, this);            this.game.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);            this.game.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);            this.game.scale.setScreenSize(true);            this.game.scale.setShowAll();            this.game.scale.refresh();        }    },
The important thing here being that it is no longer in the create function, and that I have the refresh() call.
I'm actually not sure why this is a problem but this fixed it for me.
Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...