Issues in apps under iPhone X, XR, XS, XS Max

Here is in real device.

Now black screen has gone.But white screen show.Still not full screen.

I try viewport view-fit-cover.It can resolve white screen.

But on Header over lapse.I try css

body{ padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); }

it still overlap on top(App Overlap statusbar with node.Cannot fix in AB.

Maybe I do something wrong.

resource:

https://stackoverflow.com/questions/46232812/cordova-app-not-displaying-correctly-on-iphone-x-simulator

Hello Tin,

I am investingating this issue and here what I found. First of all, we certainly can use the "viewport=cover" instead of the "viewport=contain". In fact, I upload right now a new AB release who already use the "viewport=cover". However, what we can't apply is the CSS code that you shown above.

We can't use that CSS in the body nor in the ".appView", better said, we can use it... but that code don't work as expected. This is due to the way in which AB places our controls in the app's view: AB place the controls in an absolute way, then, the view's padding can't do nothing here.

But not all is loss! We can take at least two possible ways in order to view our apps working in the new iPhone devices. The first way is to use the Cordova's Status Bar plugin, that is, just check the "Status Bar" Cordova plugin in the app's Cordova options.

A good idea is also to set a color for the status bar and we can do this from the app's options -> Cordova -> Configuration -> Statusbar.

By using a status bar in our apps, what we can see is the Calculator sample (for example) like the below one, in an iPhone X simulator:

As we can see in the images (and you can see if try with the new AB release and the modified Calculator app sample), by using the Status Bar our "top" input control are placed as expected, and, the same can be said for the bottom of the views, since we are now using the "viewport=cover" now too.

So this means that we need to use the Apache Cordova Status Bar plugin in any case? Not always, or, better said, just if we need that... let me to explain. If we prefer to do not use the Status Bar plugin, then we leave the appropriate space at the top of the views.

So we can continue placing controls at the top, but, maybe it's not a good idea to place input controls at the top, except if we leave a little more space between the top view and the control's top. Remember, this preventions are not needed if we use the Status Bar plugin.

So the point is that, if we do not want to use the Apache Cordova Status Bar plugin, we must leave a little more space for the controls at the top of the app's views. Yes; a more or less similar space that what you try to do using your proposed CSS code.

Instead of use that CSS code, and, since we really can't use it, what we must to do is to leave that space in the controls at the top of the views. We must take this solution... or use the Status bar plugin, which produces the expected result without this preventions.

Go ahead if you have any further question, Tin!

---

On AB 2018.124, It still overlap in node on the real device.David

It look like white space is better then overlap.

Hello Tin,

This is quite rare. I check rigth now the latest Calculator sample and they include the Cordova "Status Bar" plugin, but your Calculator sample apparently don't use it... maybe you need to start with a new Cordova compilation? Can you check if the app is using the Cordova "Status Bar" plugin?

---

I did not modified project.On run cordova,I have seen it already add statusbar. I test on emulator,it the same as real device.

Hello Tin,

Are you try with a new compilation of the app? Remove the "Compiled" directory, compile the app again. Remove the Cordova stuff of the app and compile the app again from the scratch. I can't reproduce that problem here, Tin, my above screenshots are from an iPhone X emulator, and, I also try with certain other app (a real app which I am developing) in the emulators of all the new iPhones and works as expected.

---

I already do that,David.I delete compiled folder and re-compiled.Output like that.

Hello Tin,

Then I can't understand what can happen, since I can't reproduce the problem here. One thing is clear... apparently your app is not using the Status bar plugin, and they must do it... Are you try to change the color of the "Status Bar"? But we are on the same thing... the Calculator sample already set a color for the "Status Bar"! Can you see this, Tin? Can you take a look at the app's options -> Cordova -> Configuration -> Statusbar and confirm that you can see a silver color for the "Status Bar"?

---

Hello Tin,

Can you try with other app sample or one of your apps? Please, check that you use the Cordova "Status Bar" plugin...

---

Here it is. and ios output project https://www65.zippyshare.com/v/tDuNVwL4/file.html

Hello Tin,

Apparently your iOS project is different that the files that I get here in my mac OS after compile the apps with Apache Cordova. Are you using the latest version of Apache Cordova and the latest version of XCode? Certainly, Tin, I can't say too much... because I can't reproduce the problem here! If you are using the "Status Bar" plugin, as apparently you are done, why the "Status Bar" don't appear and/or don't appear in the silver color? There must be something rare... because apparently you are not using the "Status Bar" plugin... for some reason (maybe you hide the "Status Bar"? I don't think so...).

That's is what I can see in your images: the "Status Bar" plugin is not present... and must be present...

---

I compiled on window and sent file to open on macOS.And if you see in picture,I use lestest version.

Hello Tin,

That can be the problem. I am talking about compile the app in mac OS. I don't know why the compilation in Windows do not work. The main point here is clear: if you are using the "Status bar" plugin... where is the "Status Bar"?

That is the problem: apparently the plugin is not used for some reason, and that plugin must be used in our case.

Can you try to compile the app with Cordova in mac OS?

---

I try my project.It the same. I will try to compiled on macOS.First I need to install cordova on macOS...

Hello Tin,

Yes; please, do it. Don't worry about Cordova. I can tell you that once you are ready with that and the other stuff, compile an app is quite fast and simple: even more in the recent versions of Cordova. Maybe there is some problem in the compilation of the app project in Windows... I try it here, and, the "Status Bar" plugin is installed as expected, etc. But, for some reason, apparently the plugin is not ready in the app.

---

I compiled on MacOS,It work like you say,David. but I got another problem.my content near footer is out of view.I sent image to your mail.

Hello Tin,

I see your image. I am not sure if you are using the "Status Bar" in that project or not. Anyway, the footer is another kind of problem. If you try with the Calculator sample, for example, you can see twe don't have that problem. So maybe you must place the footer a little up in order to avoid the problem that you have now: depend what you use for the footer, you must do it in one or another way, but you must place the footer with enough space.

What we must take in consideration is this: with the "Status Bar" plugin we can reach the top of the app's view with any control and without problems. Without the "Status Bar" we need to leave enough space. And the same can be said for the footer, Tin: we must leave enough space for the footer, at least in some scenarios / apps... because not all the footers are the same.

I understand that this can be a bit tricky for you, but, that's the only solution if we want to be ready for the iPhones... without the "white band"... Some footers can just work like now, without changes... some others not.

If you look at the Calculator sample, you can see how I leave enough between the buttons in the footer and the app's view end. This is enough to deal with the new iPhones, that is, doing this, you can see the Calculator sample running as the above images.

P.S: If, in the main while, you want to use the app with the "white bands", just edit the "index.html" file and set the "view-port" to "contain" instead of "cover". My recomendation, however, is that you try to modify the app to reach also the new iPhones: I invest yesterday a couple of hours to do this in some of my apps, but now it's working well.

---

How can I rollback output to white space as before 2018.124? if I set layout as you told,in iphone 6,7,8 layout will not show as expect....

Hello Tin,

P.S: If, in the main while, you want to use the app with the "white bands", just edit the "index.html" file and set the "view-port" to "contain" instead of "cover". My recomendation, however, is that you try to modify the app to reach also the new iPhones: I invest yesterday a couple of hours to do this in some of my apps, but now it's working well.

---

I have seen your mail.Can I set in custom metadata in AB?And what code to set in to rollback as before 2018.124?

Hello Tin,

The only thing you must to do is to edit the "index.html" and change "view-port=cover" to "view-port=contain". There is not possible to do it from AB, Tin, and probably is not a good idea... because the idea is that we design the app in a way that can work in almost platforms as possible. You no need to do anything else, however, nor touch any code: just change the "view-port". You may want to do it... until you try to adapt the app to the new used "view-port".

---

And if I set layout as you told,in iphone 6,7,8 layout will not show as expect.Layout will look good only in iphoneX

Hello Tin,

Sorry, but, I am not sure if can understand. If you replace this:

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

... by this other:

<meta name="viewport" content="viewport-fit=contain, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

Then you must see the "white band" in new iPhones, but not in the previous ones, if I am not wrong. That is, if you do the above change, you must get the same results that you get before.

---

Thanks for the code.I understand you. But if I do as you told that to leave enough space on footer or header.This will effect other iphone 6,7,8 layout too. It will not show as expect in iphoneX.Then I decide to use white layout as output before 2018.124.

Hello Tin,

The idea is to get a layout that can work in all the platforms and devices, also the new iphones. I know that this may requires changes in existing apps and in some scenarios (like apparently your case) can be more tricky, since the design of your footer.

Maybe a possible solution for your specific case can be to use viewport-fit="contain", like before, so your app continue working as before. Then, at runtime, you can check if the app is running in a new iphone, and if so change the "viewport-fit" to "cover".

I think this can be possible to do using a bit of Javascript code or the UserAgent action or the Device Cordova plugin.

With the below code you can change the viewport metatag to "contain":

StartJS $('meta[name=viewport]').attr('content', 'viewport-fit=contain, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1'); EndJS

---

Hello Tin,

Another possible approach is to do what I say above, but apply certain CSS code to the footer when your app run in the new iPhones. I say this in the case that you prefer something like that instead of change the "viewport" meta tag. Try both things if possible and choose the best.

---