Browser UI problem on iOS Safari

[Listege]

Hello, I'm working on a game with Phaser v2.4.6.

When I run my game on iOS Safari, UI overlaps game screen.(See the screenshot. And it's totally OK on Android)

Is there a way to solve this problem?

 

Here are my settings for the game.

Meta tags of html file:

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1, IE=9">
    <meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0 minimal-ui shrink-to-fit=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="full-screen" content="yes">
    <meta name="screen-orientation" content="portrait">
    <meta name="renderer" content="webkit">
    <meta name="force-rendering" content="webkit">
    <meta name="format-detection" content="telephone=no">

CSS file:

body {
    background: black;
    margin: 0px 0px 1px 0px;
	padding: 0;
    overflow: hidden;
}

Initializing Code

this.game.scale.pageAlignHorizontally = true;
this.game.scale.pageAlignVertically = true;
this.game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;
this.game.scale.setMinMax(320, 180);
this.game.scale.setGameSize(1480, 860);
var xRatio: number = window.innerWidth / 1280;
var yRatio: number = window.innerHeight / 720;
if ((window.innerWidth / window.innerHeight) >= (1280 / 720)) {
        this.game.scale.setUserScale(yRatio, yRatio);
}
else {
        this.game.scale.setUserScale(xRatio, xRatio);
}

 

Thank you for your help in advance  

 

[Phaser911]

Hello, I also have the same question. How to fix this problem, is there a way to hide UI?

Any trick to avoid showing it?

It's Safari only. What's your practice? Anyone?

[mattstyles]

There's no way to disable it, and its really annoying that it overlaps the main browser area. Fullscreen canvas games are one use-case where this choice from Apple makes no sense, but there is another, tabbed apps are now fairly standard on iOS and the tabs are fixed to bottom by default, unfortunately there is no way to create a web-app with the same structure as the browser chrome usually overlaps your tab bar. Very frustrating.

If you save the app to your home screen and run it from there the meta tags you've set should disable the browser chrome, which is what you want, but it requires your users to save it to home screen and run it from there rather than navigate to your page via Safari.

Alternatively you could wrap your app in something like Cordova and have it as a 'native' app, but thats a massive change to how your app is consumed.

I'd love to be proved wrong but I've built a number of web-apps that want to mimic iOS tabbed behaviour so have had a number of people looking at solving this, there is no way. It would even be better if the tab bar consumed the screen rather than overlaid it, but, unfortunately, this is one of those little areas where Apple seem to be hampering web developers creating more native-like experiences.

[Listege]

Thanks for the answer, mattstyles.

I googled a lot of time to hide UI but failed, so I know it's impossible.

Can I just shrink canvas to fit in visible area?

[mattstyles]

3 hours ago, Listege said:

Can I just shrink canvas to fit in visible area?

You can, but, you don't know what the visible area size is as you don't know when the bottom bar is/is not in view.

If your page never scrolls then iOS never gets the user action (scrolling) to ever hide the bottom bar so you could take the route of assuming it'll always be visible and size your canvas to be viewportHeight - x, where x is the height of the bottom bar (you'd have to hard code the height based on current Apple info on the height of that bar, I think its the same size for all devices, but could change with any iOS update).

If your content does scroll you can cheat and place the scrollable content inside another fullsize div, in which case the main window will never scroll (your fullsize div will be the thing scrolling) so the bar will always be visible.

It's just such a shame that Apple didn't make it so that the bottom bar is not an overlay, same as the top bar.

[Listege]

Hmm... Okay, I tested it with several iOS devices.

It's working well on iPhone Plus(with large screen) devices and has a problem only on small devices like iPhone 5s.

So, I can't even hardcode size of UI chromes to solve this problem.

What the hell is wrong is iOS Safari? It was the best browser for HTML5 game devs a few years ago.

[Phaser911]

Sorry for posting on your topic  

How can I detect mobile Safari and show different scene for it? I would like to show one scene for safari and other scene for all other browsers, but I cannot find code for it? I don't understand documents, did not see a real example? Can anyone help?

[mattstyles]

7 hours ago, Listege said:

What the hell is wrong is iOS Safari? It was the best browser for HTML5 game devs a few years ago.

I'm back doing some fairly heavy mobile web stuff at the moment (after a few years out of that specific area) and Safari is the ballache, Chrome/Android just works great, still a lot better than a few years ago though! But yeah, I agree, its such a shame but very annoying thing.

8 hours ago, Listege said:

So, I can't even hardcode size of UI chromes to solve this problem.

You can, its just that it might be inconsistent. Apple release good design docs so you should be able to find the exact size, its probably something like 40-60px.

6 hours ago, Phaser911 said:

How can I detect mobile Safari and show different scene for it?

Google for user agent/navigator sniffing. UA sniffing is rife with problems, and you have to consistently keep on top of it as UA's do change as new versions are released, but when you just want to know which platform you're running on its consistent enough (for a splash screen or an icon on-screen or something). For anything else do feature detection over UA sniffing though.