phaser 3, bootstrap 4 css resize and fullscreen problem

Recommended Posts

I embedded Phaser3s' canvas parent in a bootstrap table (FlexGrid) and am trying to get fullscreen and window resize to work as expected.

<main role="main" class="container">
 <div class="container">  <div class="row">  <div class="col">
     <!-- the problem doesn't occur without the bootstrap flexbox (i.e. when there's just this div) -->
    <div id="phaser3MainView"></div>

There are three distinct approaches i've worked on.

First, i've tried to disable the ScaleManagers auto features and see what happens, but after returning from fullscreen, hit areas don't seem to work anymore. Here's a annotated example for that:

var config = { type: Phaser.AUTO, scale: {
	mode: Phaser.Scale.NONE,
	autoCenter: Phaser.Scale.Center.NO_CENTER,
	zoom: Phaser.Scale.NO_ZOOM,

Second, i've tried to use the ScaleManagers auto features. I tested all combinations, but none worked for me. Here's a annotated example for that:

var config = { type: Phaser.AUTO, scale: {
	mode: Phaser.Scale.FIT,
	autoCenter: Phaser.Scale.CENTER_BOTH,
	zoom: Phaser.Scale.MAX_ZOOM,

Finally, i tried to come up with a custom solution and tried to work around the system. Here's a annotated and working example:

function getFullscreenSize()
	var w = window,
	d = document,
	e = d.documentElement,
	g = d.getElementsByTagName('body')[0],
	x = w.innerWidth || e.clientWidth || g.clientWidth,
	y = w.innerHeight|| e.clientHeight|| g.clientHeight;
	return {x:x, y:y};
function calcZoom()
	let x, y;
	if (game.scale.isFullscreen) {
		let size = getFullscreenSize();
		x = size.x;
		y = size.y;
	} else {
		x = Math.min(game.scale.canvas.parentNode.clientWidth, window.innerWidth);
		y = Math.min(game.scale.canvas.parentNode.clientHeight, window.innerHeight);
	let zoomH = x / game.config.width;
	let zoomV = y / game.config.height;
	return Math.min(zoomH, zoomV);

var lastZoom = 1;
window.onresize = function (event) {
	let zoom = calcZoom();

	if (!game.scale.isFullscreen && zoom > lastZoom) { = "8000px"; = "6000px";
		setTimeout(function() {
			let zoom = calcZoom(); = game.config.width * zoom + "px"; = game.config.height * zoom + "px";
			lastZoom = zoom;
		}, 1);
	} else { = game.config.width * zoom + "px"; = game.config.height * zoom + "px";
	lastZoom = zoom;

	if (game.scale.isFullscreen) {
		let size = getFullscreenSize();
		if (size.x > size.y) {
			let offsetX = (size.x - size.y) / 2; = offsetX / zoom + 'px';
	} else { = '0px';

Now my question is how this is ment to be solved.

The setup seems to clearly violate the "Parent and Display canvas containment guidelines" from Phaser-CE ( ) but there is nothing like that mentioned in the Phaser 3 notes ( ).

The hacks from the third approach seem to work, at least in the small test environments i played around with, but i'm wondering if that's just luck and if there's an actual painless solution for this kind of setup or if it's as forbidden as it's been for Phaser-CE.

I'm new to Phaser and not good with javascript, so please forgive me the maybe strange style.

Note: This same question has also been posted to

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.