I’ve been working on a team to implement a board game we enjoy playing into a web game. We’ve finished a simple implementation of the game- backend (game logic) in python, frontend (visuals players see in browser) in Phaser 3 and have the two communication using SocketIO.
After conducting testing on many different devices (10-15 MacBooks, 3-4 Windows PCs, a couple iPads) we’ve come across a performance issue that only comes up on Safari - either on MacBooks or iPads (using other browsers on either). The game is still entirely functional (all of the gameplay still works - clicking, typing and sending text in the chat, etc.) but is varying degrees of slow. For one user the game takes 2-3 seconds to register anything, including a click or typing a single letter into the chat, for others it’s usually not that bad though noticeable. Interestingly enough, if those same users open up Chrome or Firefox on the same computer (even while running the other game) they can play the games with no-noticeable lag (even if they join the same exact room within the game).
As a result of trying to isolate the bug, I’ve noticed that Safari running our game usually uses up to 130% of CPU according to Activity Monitor and massive amounts of RAM. Again with any other browser, it’s usage statistics are not even noticeable (5-10% CPU and negligible RAM space).
Are there any Phaser veterans out there who have experienced issues with Safari that might offer any advice? Since this project is part of a class, cross-browser functionality is required yet this bug seems solely limited to Safari. Are there any weird content blockers, protection functions, etc. in Safari that could be causing this behavior?
Thanks in advance - sorry for the long post!
Are you using Canvas or WebGL rendering? What version of iPads and iOS are you testing on?
In my experience, I haven’t noticed performance issues in most apple products. But I can tell you this, I had performance issues in those devices (in Safari) but with three.js, mostly because the retina resolution display are too big to render at 60fps. I solved my problems by using a device pixel ratio = 1 when creating my canvas, instead of the native devicePixelRatio of the retina displays. Also turning off antialiasing helped, HiDPI displays don’t need it as much.
1 Like
We are currently using Canvas renditioning. All of the iOS versions (and MacOS versions) we’ve used are the most up to date that I can get- iOS 12.4 & Mac OS 10.14.3.
I’m not entirely sure what three.js but our game is two dimensional and we don’t have any need for any 3D rendering. Our canvas is statically scaled to always 1066 x 600, so not sure if the DPR affects our scaling. I’m going to look into turning off antialiasing- is turning pixel art to true the only way to do that? going off this link.
Hi, the reason I asked about what type of rendering are you using is because Canvas is know to be super slow on some browsers, specially in mobile. Of course it all depends on what type of game are you developing, some games might do just fine with canvas.
I mentioned my problems with three.js because if you were using webgl, some of those problems might still be valid for webgl phaser games.
The only suggestion I can give you with the information I have is to try the WebgGL render and see what happens 
Thank you all for the help!
jackfreak - your suggestion to switch to WebGl seems to have fixed it. We were using Canvas for every device, but switching to Auto allowed Safari to use WebGl which it seems to prefer.
Not sure why we chose canvas initially, but happy you could help us find a fix!
1 Like
maybe because many android device performance is very low with webGL. and you wanted to support them as well.
Glad I could help! 
Also choosing AUTO seems wise, it will go for WebGL and fallback to canvas for those devices that don’t support it.
Hello,
I found how to increase performance on Safari and iOS
Just disable antialiasGL in the GameConfig
antialiasGL: false,