Vivern Posted May 26, 2014 Share Posted May 26, 2014 On some android devices (stock browser) duplicate screen game with offset (use one canvas). How to solve this problem? Link to comment Share on other sites More sharing options...
remvst Posted May 26, 2014 Share Posted May 26, 2014 Do you have overflow: hidden on the body or html element? Link to comment Share on other sites More sharing options...
mariogarranz Posted May 26, 2014 Share Posted May 26, 2014 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. Link to comment Share on other sites More sharing options...
remvst Posted May 26, 2014 Share Posted May 26, 2014 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 More sharing options...
mariogarranz Posted May 27, 2014 Share Posted May 27, 2014 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 More sharing options...
Harissa Posted July 29, 2014 Share Posted July 29, 2014 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 More sharing options...
Recommended Posts