Black screen on mobile browser only

Phaser 3
1

Very new to Phaser. I followed the “making your first game” tutorial and made some modifications for learning: https://phaser.io/tutorials/making-your-first-phaser-3-game/part1

Everything works great on a desktop inside of Chrome. I deployed it to Heroku at this URL: https://immense-shelf-18574.herokuapp.com/

When I try to access that on iPhone XR using Chrome or Safari, all i get is a black screen. Is it being blocked in some way by iOS? I can see in the Heroku logs that the request is accepted… and Im not seeing any errors in that log. Desktop is accessible and works just fine.

Im not sure where to go from here. I’ve googled around, but haven’t had much luck. Any help would be great! Thanks!

2

It works fine on my Android Device. Probably your phone doesn’t supports WebGL

3

Works for me too, Android - chrome.

4

Did you try debugging remotely to see the error message or using an emulator?

5

Thank you everyone for the replies.

I will look into trying an emulator and additional debugging remotely. Through terminal in VS code, I was able to watch the logs —tail while I accessed the site on my iPhone. No error messages popped in there.

I’ll keep digging around. Thank you again!

6

In Safari:

[Error] ReferenceError: Can't find variable: BasicButton
	create (singlephase.js:80)
	create (phaser.js:74006)
	loadComplete (phaser.js:73918)
	emit (phaser.js:1867)
	loadComplete (phaser.js:167611)
	fileProcessComplete (phaser.js:167577)
	onProcessComplete (phaser.js:4398)
	(anonymous function) (phaser.js:13176)
7

Thank you! This helped.

What I did that fixed it… I removed the < script > tag from the index.html file that was including the BasicButton and instead used import { BasicButton } from ‘./BasicButton.js’ at the top of the file. I also made sure the export the BasicButton class in the BasicButton.js file.

8

You can remove phaser.js and keep phaser-arcade-physics.js.