Jump to content

Android bug: duplicate screen game with offset


Recommended Posts

This is a bug I've had to deal with on Android stock browsers, I think from 4.1 to 4.2.2 (which means, most of the devices out there right now).


As remvst says, one suggested solution is not to use overflow: hidden. That didn't work for me.


The only way I could "solve" it was by making sure my canvas was covering the whole screen, and constantly redrawing the whole content, because the clearRects() method seems to be bugged, and somehow a frozen canvas image stays on the background the whole time.

More info:








Honestly, Android stock browser and its widespread use is the worst thing that could have happened to HTML5 developers. I hope Google removes that buggy crap from their systems as soon as possible. Almost 60% of the code corrections I have to do on my games are just to fix random weird behaviours in this browser.

Link to comment
Share on other sites

The clearRect issue is more of a Samsung issue as far as I know, and only shows a canvas state that shouldn't be here.


The overflow: hidden issue though, shows the canvas twice, and updates both at the same time. If both canvas are visually updated, the overflow: hidden is more likely to be the actual issue.

Link to comment
Share on other sites

Yeah you are right remvst, I thought it was the same issue because every device I have replicated the error on was a Samsung device.


Then, since we are talking about Phaser, Phaser uses overflow:hidden by default, this is the function, inside the Canvas class:

addToDOM: function (canvas, parent, overflowHidden)

This function, however, is called internally when you create the game, with true value, inside Game class:


 if (this.renderType !== Phaser.HEADLESS)        {            this.stage.smoothed = this.antialias;            Phaser.Canvas.addToDOM(this.canvas, this.parent, true);            Phaser.Canvas.setTouchAction(this.canvas);        }


So maybe you will have to overwrite that code inside Game.js.


That's what I did when I found this issue, though it didn't solve my problem.

Link to comment
Share on other sites

  • 2 months later...

I had this duplicate screen problem with the stock Android browser. I fixed it by changing the overflow of the game div from the default hidden to visible.


I put this (Typescript) code into the Boot state create function.

var gameElement:HTMLElement = document.getElementById('game');gameElement.style.overflow = "visible";

Seems to work fine now. Is there a reason that Phaser sets the overflow to hidden that will come back and bite me later?

Link to comment
Share on other sites


  • Recently Browsing   0 members

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