Android bug: duplicate screen game with offset

[Vivern]

On some android devices (stock browser) duplicate screen game with offset (use one canvas). How to solve this problem?

 

[remvst]

Do you have overflow: hidden on the body or html element?

[mariogarranz]

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:
 

https://code.google.com/p/android/issues/detail?id=41312

 

https://code.google.com/p/android/issues/detail?id=35474

 

 

 

 

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.

[remvst]

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.

[mariogarranz]

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.

[Harissa]

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?