No fullscreen with scene scaling ON, mobile Safari, web app with manifest

Mobile
1

I'm trying to get rid of the bottom grey area that shows in mobile Safari, under certain conditions. See screenshot "web_app_fullscreen_NOT_OK".

Its a web app with a manifest, home screen bookmark icon, etc.

If the scene setting is without scale width, height – then it will be truly fullscreen on an iPhone 11 used for test, all fine. With the bottom bar line on top of the app. See screenshot "web_app_fullscreen_OK.png".

However, scale width, height must be on, in order to support different mobile screen size, using flexible layout settings etc. If I turn scaling ON, it will be like screenshot "web_app_fullscreen_NOT_OK".

Header tags

Have tried numerous combination of width=device-width, width=414, width not set, etc. The result has been the same with all combinations.

TestApp

Manifest.json

{
"short_name": "TestApp",
"name": "TestApp",
"lang": "en",
"description": "Test",
"icons": [
{
"src": "images/icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "images/icon-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"background_color": "#242424",
"theme_color": "#242424",
"display": "fullscreen",
"orientation": "portrait"
}

Anyone with hints on how to solve this?

web_app_fullscreen_NOT_OK
web_app_fullscreen_NOT_OK828×1792 19.7 KB

Scaling off, OK

web_app_fullscreen_OK
web_app_fullscreen_OK828×1792 1.67 MB

Scale settings

only_fullscreen_if_scaling_off
only_fullscreen_if_scaling_off1920×1241 96.7 KB

2

You may need to click Cover Notches in the Mobile options.

It could also be that your per-item flexible layout settings are setup in such a way that rearranges them unintendedly, like having a shrink to fit behavior.

If that doesn't help, feel free to send a zip of your .hype doc along with what device you're testing on and any other environmental steps necessary to repro.

3

Thanks!
It's all the way up, and below the notch. Works as expected with the notch. No problem at the top :slight_smile:

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, viewport-fit=cover, width=414" />

Yes, shrink to fit is in use, on the main container of elements.

I will upload the test project…

4

testApp.zip (709.0 KB)

Scaling is off.

To run this, put the content on a web server.
Go to the URL, with mobile Safari…
Save as Home Screen Bookmark…
Open the Home Screen Bokmark…

In my tests, it will fill the screen. All fine.
If scaling gets turned on for the scene, the grey area at the bottom will appear and squeeze the layout upwards.

5

Thanks for the details, I can reproduce what you're seeing.

Checking out via web inspector, it looks like a body height of 100% is being equated to 852px instead of the 896px actual device height; I assume this calculation is trying to take into account some safe areas.

I think I found a possible solution from:

It looks like they are using a viewport height 100vh value instead of 100% and this is doing the right thing.

Try adding this code to the bottom of your <head> section:

<style>
	body {
		height: 100vh;
	}
</style>

It works for me this way though I haven't extensively tested. Does that fix it for you?

3 Likes
6

Thanks Jonathan!

That works perfectly on iOS.
(Time to test on Androids with Chrome as well.)

I excluded the css in the testApp.zip
this is how the first part of the CSS looks like now:

html {
height: 100%;
}

body {
background-color: #242424;
margin: 0;
height: 100vh;
}

/*
@media only screen and (orientation:landscape) {
body {
transform: rotate(-90deg);
height: 100vw;
}
}
*/

.button_enabled{
background-color: rgba(0, 0, 0, 0.650)!important;;
color: rgba(255, 255, 255, 1)!important;;
}

.button_disabled{
cursor: not-allowed;
pointer-events: none!important;
background-color: rgba(0, 0, 0, 0.250)!important;;
color: rgba(255, 255, 255, 0.450)!important;;
}

.button_enabled:hover {
color: rgba(255, 255, 255, 1)!important;;
background-color: rgba(0, 0, 0, 0.850)!important;
}

.button_enabled:active {
color: rgba(255, 255, 255, 1)!important;;
background-color: rgba(0, 0, 0, 1)!important;
}

1 Like
7

Great, glad that did it!

I recall some other feedback about Hype changing units here, so I've noted that we may be able to generally deploy this as a fix for a future version. Thanks!

1 Like