CSS and Phaser input problem.

[Igor Georgiev]

Hey guys, I have made some scaling of the game via CSS so I can have my game always the proper size in the browser window. However, I lose my onInputDown because for some reason the game container overflows but visually is okay....

here is my CSS styling (visually it looks perfect):

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#content {
  height: 100%;
}

#content > canvas {
  margin: 0 auto;


    height: auto !important;
    width: auto !important;

    max-height: 100%;

    max-width: 100%;


  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Here is my game init class:

import Boot from 'states/Boot';
import Preload from 'states/Preload';
import GameState from 'states/GameState';
import * as Constants from 'data/Constants.js'

class Game extends Phaser.Game {

	constructor() {


		let height = window.screen.height;
		let width = window.screen.height / Constants.SIXTEEN_TO_NINE;

		super(width, height, Phaser.AUTO, 'content', null);
		this.state.add('Boot', Boot, false);
		this.state.add('Boot', Preload, false);
		this.state.add('GameState', GameState, false);
		this.state.start('Boot');
	};

}

new Game();

If I don't have any css code - the input works. I believe it is because the game is still bigger than what it visually appears. Has anyone had this issue?

[Ivan Lopez]

Hi Igor, Could you solve it? For a lot I try, I can not solve it

Thanks!