iOS displays autoCenter: Phaser.Scale.CENTER_BOTH in a way not consistent with results on android and on pc

[HawkenKing]

Version

• Phaser Version: phaser sandbox
• Operating system: iOS (16)
• Browser: webkit, safari, chrome

Description

Using Phaser.Scale.RESIZE, for a pixelart game, that fills the browser window size, and scales to a fixed game size. (in this case, 144 by 256).
On PC and android, the code is fine. the gameContainer group is centered in the screen.
On iOS, the gameContainer is pushed down by a margin, and the pixel aspect ratio is squashed vertically slightly. the code doesn't add a margin.

Example Test Code

https://phaser.io/sandbox/A3KSEgq7

Additional Information

tested on iPhone 12

[greptile-apps]

For internal use only

To address the issue of inconsistent scaling and margins on iOS, follow these steps:

1. Check Scale Mode: Ensure you are using the correct scale mode. In your game configuration, set scale.mode to Phaser.Scale.RESIZE.

2. Adjust Centering: Verify the centering constants in /src/scale/const/CENTER_CONST.js. Use Phaser.Scale.Center.CENTER_BOTH to center the game canvas both horizontally and vertically.

3. Handle Resize Event: Listen for the resize event in your game and adjust the game container accordingly. Use the RESIZE event from /src/scale/events/RESIZE_EVENT.js.

this.scale.on('resize', (gameSize, baseSize, displaySize, previousWidth, previousHeight) => {
    // Adjust gameContainer position and scaling here
});

4. Check for iOS Specific Issues: Add specific handling for iOS devices if necessary. You can detect iOS using user-agent strings and apply specific styles or adjustments.

5. Update Phaser Version: Ensure you are using the latest version of Phaser, as there have been updates and bug fixes related to the Scale Manager. Refer to the changelog in /changelog/3.60/ScaleManager.md for details.

These steps should help resolve the margin and scaling issues on iOS.

References

/src/scale
/src/scale/const/CENTER_CONST.js
/src/scale/events/RESIZE_EVENT.js
/changelog/3.60/ScaleManager.md

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

[HawkenKing]

edited the code sample to be more simple, the key issue is autoCenter: Phaser.Scale.CENTER_BOTH

When used on iOS it creates a margin at the top.

A fix is being applied on the following urls, although it is undocumented(?) and not part of the code samples it is displaying.

https://labs.phaser.io/view.html?src=src/scalemanager\zoom%20manual%20resize.js

https://labs.phaser.io/view.html?src=src/scalemanager\fit%20and%20snap.js

[zekeatchan]

Hi @HawkenKing. Thanks for submitting this issue. We have fixed this and pushed it to the master branch. It will be part of the next release. Do test it out and let us know if you encounter any issues.