Search the Community

Hello guys, I'm struggling to vertically center my Phaser game inside Cocoon IO wrapper. In the browser it's all centered both horizontally and vertically but when I load it into Cocoon the game is aligned top. My setup: - html & body tags' height property is set to 100% - I don't have a div containing the canvas element, I let Phaser handle the creation of the canvas. - In the Boot state I use: this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.refresh(); For some reason, though my screen is 1920 x 1080, and the canvas been displayed like this: <canvas width="480" height="800" style="display: block; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 1080px; height: 1800px; cursor: inherit; margin-left: 0px; margin-top: 60px; margin-bottom: -60px;"></canvas> I end up in Cocoon with the game align to the top of the screen and the 120 extra pixels in the bottom and not distributed equally on the top and bottom of the game. Any advice on this? Thanks!