# Game doesn't work on webbrowser and especially safari

**URL:** <https://phaser.discourse.group/t/game-doesnt-work-on-webbrowser-and-especially-safari/7132>\
**Category:** Phaser 3\
**Created:** [August 7, 2020, 12:49pm UTC](https://phaser.discourse.group/t/game-doesnt-work-on-webbrowser-and-especially-safari/7132 "2020-08-07T12:49:42Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Felicia\_Debye](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/felicia_debye/32/3220_2.png) [@Felicia\_Debye](https://phaser.discourse.group/u/Felicia_Debye)\
**Post date:** [August 7, 2020, 12:49pm UTC](https://phaser.discourse.group/t/game-doesnt-work-on-webbrowser-and-especially-safari/7132/1 "2020-08-07T12:49:42Z")

</div>

I am in the process of testing my game and have therefore set up an Apache web server on my Windows machine from where I host the game. On my Windows and Android devices the game loads, but in the web view some pictures are only shown as black boxes. When I call the page from the same link on my Apple devices, the page appears but not even the boot scene is executed. What could be the reason for this?

main.js:  
var graphics;  
var touch = false;

window.addEventListener(‘load’, function() {

```
//game configuration
var game = new Phaser.Game({
"title": "infoteam-Universe",
"width": 1920,
"height": 1080,
"type": Phaser.WEBGL,
"backgroundColor": "#88F",
"parent": "game-container",
"physics": {
    default: 'arcade',
    arcade: {
        gravity: { y: 1080 },
        debug: false,
    }
},
"scale": {
    "mode": Phaser.Scale.FIT,
    "autoCenter": Phaser.Scale.CENTER_BOTH
},
"input": {
	activePointers: 3
},
dom: { 
	createContainer: true } 
});
game.scene.add("Boot", Boot, true);

```

});

class Boot extends Phaser.Scene {

```
preload() {
	this.load.pack("preload-pack", "assets/preload-pack.json");
}

update() {
    //start first scene of game
	this.scene.start("Preload");
}

```

}

And the view on my IPad:

 ![MicrosoftTeams-image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/1/1fa8bf59d457774781d52248d7b789d21837258f.jpeg)

---

<div class="post-metadata">

**Author:** ![Felicia\_Debye](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/felicia_debye/32/3220_2.png) [@Felicia\_Debye](https://phaser.discourse.group/u/Felicia_Debye)\
**Post date:** [August 7, 2020, 12:56pm UTC](https://phaser.discourse.group/t/game-doesnt-work-on-webbrowser-and-especially-safari/7132/2 "2020-08-07T12:56:55Z")

</div>

Here are two more pictures, one in Mozilla Firefox (with pictures) and one in Chrome (without pictures). Whereby the pictures are displayed on the PC in both browsers.

 ![WhatsApp Image 2020-08-07 at 14.54.19](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/f/ffcab844100badee2047b87e863c78a9f9f52bb6.jpeg) ![WhatsApp Image 2020-08-07 at 14.54.13](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/74bdbad8eb3abfd4e716d6e28a40bb679b37e030.jpeg)

---

<div class="post-metadata">

**Author:** ![Thyebe](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thyebe/32/3799_2.png) [@Thyebe](https://phaser.discourse.group/u/Thyebe)\
**Post date:** [August 7, 2020, 2:38pm UTC](https://phaser.discourse.group/t/game-doesnt-work-on-webbrowser-and-especially-safari/7132/3 "2020-08-07T14:38:26Z")

</div>

Some suggestions:

1. Declare `var game; ` outside the document.addEventListener;
2. Add the key

```javascript
       scene: [Boot]
```

in the game config and remove

```javascript
       game.scene.add("Boot", Boot, true);
```

1. Add

```javascript
      constructor(){ 
            super("Boot");
      }
```

before the “create()” method.

After these changes, run the game and see if the problem persist.

---

<div class="post-metadata">

**Author:** ![Felicia\_Debye](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/felicia_debye/32/3220_2.png) [@Felicia\_Debye](https://phaser.discourse.group/u/Felicia_Debye)\
**Post date:** [August 7, 2020, 3:50pm UTC](https://phaser.discourse.group/t/game-doesnt-work-on-webbrowser-and-especially-safari/7132/4 "2020-08-07T15:50:08Z")

</div>

Unfortunately it is still the same problem… ☹

---

<div class="post-metadata">

**Author:** ![Thyebe](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thyebe/32/3799_2.png) [@Thyebe](https://phaser.discourse.group/u/Thyebe)\
**Post date:** [August 7, 2020, 4:29pm UTC](https://phaser.discourse.group/t/game-doesnt-work-on-webbrowser-and-especially-safari/7132/5 "2020-08-07T16:29:09Z")

</div>

Could you please share the entire modified code?

I will try to run it on my PC

---

<div class="post-metadata">

**Author:** ![David\_Montoya](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/david_montoya/32/3750_2.png) [@David\_Montoya](https://phaser.discourse.group/u/David_Montoya)\
**Post date:** [August 12, 2020, 6:47am UTC](https://phaser.discourse.group/t/game-doesnt-work-on-webbrowser-and-especially-safari/7132/7 "2020-08-12T06:47:47Z")

</div>

Hi, I was also having some problems with my game in apple devices, one of the issues was that I was using some JS new functionalities, like default parameters on the functions, which is not supported on IOs browsers.  
Because there is no console in mobile browsers, is very useful to have a message log in the top of the webpage, I used this code :

**HTML:**  
\< div id=“prompt” style=“position: absolute;color:red; font-size: large;”\> \< /div \>

**JS:**  
window.onerror = function (e) {  
const queryString = window.location.search;  
const urlParams = new URLSearchParams(queryString);  
document.getElementById(‘prompt’).innerHTML = e.toString();  
}

Hope that helps you a little

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [August 12, 2020, 8:09am UTC](https://phaser.discourse.group/t/game-doesnt-work-on-webbrowser-and-especially-safari/7132/8 "2020-08-12T08:09:24Z")

</div>

Hi,  
For mobile dev, you can use remote debuging, more info here

> <https://stackoverflow.com/questions/5943985/how-to-debug-javascript-code-with-mobile-browsers>

For the new js functionalities, webpack and babel can help you to transpile your code to es5.  
I personnaly always use the Phaser 3 webpack template, all the config is already done.