Jump to content

CSS and Phaser input problem.

Igor Georgiev

Recommended Posts

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);


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?

Link to comment
Share on other sites

  • 1 month later...

  • Recently Browsing   0 members

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