iPhone Chrome and Safari taskbar overlaps the bottom of my game




i’m using FIT scale mode, but on iphone taskbar overlaps the bottom of my game. Can anyone have solution?
Thanks.

Share the project that you are demonstrating.

this is my code and my demo exam.
https://github.com/congnd2810/phaser-multiscreen
https://phaser-multiscreen-checker.pages.dev/

It works on pc and android, but on iphone the taskbar always overlaps bottom of my game and don’t show ‘tap to continue’.

This is not a Phaser problem, including the phaser editor, it’s all because of iOS and it needs to be dealt with, for example, this article reveals the problem and its solution.

https://dev.to/maciejtrzcinski/100vh-problem-with-ios-safari-3ge9

But why is there really no simple solution in this discussion that could help, namely using height: 100 dvh; instead of height:100vh; in CSS for #app.
phaser-multiscreen-main.zip (171.9 KB)

1 Like

Thank you, that’s exactly what I wanted.

I think Phaser tries to do this automatically on iOS, if there’s no parent in the game scale config.

Please try https://cdpn.io/pen/debug/xxoZBbz.

1 Like

I tested it, the browser’s actual height is less than innerheight.