App not displaying full screen for iPhone X

[jacquesdev]

Short description of the problem:

My app is still not displaying as expected on the iPhone X simulator in XCode, after going through the ionic ios-11 checklist. http://blog.ionicframework.com/ios-11-checklist/

What behavior are you expecting?

I expect to app to stretch to the full height of the iPhone X.

Steps to reproduce:

1. I followed this guide: http://blog.ionicframework.com/ios-11-checklist/, and made the following changes:
   • I updated to ionic 1.3.5 (via bower)
   • Updated the viewport to <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   • I wasn't using WKWebView, but installed this as well (but this broke the content so just removed it again)
   • Updated to cordova-plugin-statusbar@2.3.0
2. None of that made a difference so I then tried some of the suggestions here https://github.com/ionic-team/ionic-v1/issues/336:
   • Updated to cordova-plugin-splashscreen@4.1.0
   • Made sure I was using gulp-clean-css
3. I tried updating the css as mentioned here: https://github.com/ionic-team/ionic-bower/issues/44#issuecomment-346624838

One strange thing I want to mention which seems to be giving a warning but still working is this: $ ionic cordova build ios [WARN] Not performing Ionic build for project type: ionic1.

cordova build ios

But then it carries on and builds as expected without any errors?

I have now run out of ideas, any help would be appreciated.

Which Ionic Version? 1.x or 2.x Ionic 1

Run ionic info from terminal/cmd prompt: (paste output below)

cli packages: (/Users/jacques/dev/mobile/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 6.5.0 

local packages:

    Cordova Platforms : ios 4.5.4
    Ionic Framework   : ionic1 1.3.5

System:

    ios-deploy : 1.9.2 
    Node       : v6.11.0
    npm        : 2.15.12 
    OS         : macOS High Sierra
    Xcode      : Xcode 9.1 Build version 9B55 

[saurabhgupta050890]

Check your splash screen settings. If you are using Legacy Launch Images you may need to switch to Launch storyboard

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/#launch-storyboard-images

Also, I got it working with Legacy Launch images by adding

<splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
<splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />

in config.xml, but having different issue on iPhoneX sim as mentioned here https://github.com/apache/cordova-plugin-splashscreen/pull/135#issuecomment-346744923

[jacquesdev]

@saurabhgupta050890, thank you for that suggestion. Just to confirm though, I would guess if that was the case, just my loading/splash screen would be affected, and look incorrect, and the rest of the app would work ok.

Or is the implication that if your loading screen image was wrong/not updated it would affect your whole app layout?

[saurabhgupta050890]

I guess if you are using cordova-plugin-splashscreen then iphonex has black borders if spalsh screen is not configured correctly, haven't tried removing this though

Please refer this for more details: https://stackoverflow.com/questions/46232812/cordova-app-not-displaying-correctly-on-iphone-x-simulator/46232813

[pvandrunen]

It's taken me probably 30 hours of work to get my v1 project working in iphone-x, Here are some tips:

1. Update ionic/cordova cli to the LATEST version. $ npm install -g ionic cordova
2. Install the latest ionic version, critical. $ npm install ionic-angular@legacy
3. With an this updated CLI you'll get lots of errors. You have to work through them. If you don't have the latest CLI you can't generate new splash screen.
4. You need to delete your iOS build, $ ionic cordova platform remove ios
5. You'll probably need to uninstall and reinstall to the latest versions of plugins
6. You'll probably need to update several npm modules, you'll get errors until it's right, do something like this: $ npm outdated OR $ npm update
7. $ ionic cordova resources --force Splashscreens are CACHED, after you update the resources and update your build you need to delete the app from the device. Maybe even restart xcode
8. If you were using an old version of the CLI you need to remove the plugin cordova-plugin-console (do this before you platform add)
9. I had lots of bugs with the new webview plugin, don't use it. $ ionic cordova plugin remove cordova-plugin-ionic-webview --save

for reference, if you're doing an ionic v1 project $ ionic --version 3.18.0

$ cordova --version 7.1.0

$ ionic cordova plugin list cordova-plugin-splashscreen 3.1.0 "Splashscreen" cordova-plugin-device 1.1.1 "Device"

[bettysteger]

@jacquesdev have you found your problem? is this really connected with the splash screen?

Update: My problem was a missing splash screen, now the app is full screen 👍

thanks @saurabhgupta050890 !

[jacquesdev]

@lpsBetty - no have not yet found the issue (but did not look into the splash screen issue). But with your update I will have to try it!!!! Thanks!

[bettysteger]

@jacquesdev sorry I really thought that the splash screen solved the problem, because after adding the splash screen it worked on the iPhone X simulator! I had no real device,... and now found out, that it is still not full screen on the iPhone X!

I have no idea why it works with the simulator and not on the actual device 🤨 fixing it without a device seems quite impossible for me.. 😅

[bettysteger]

@jacquesdev I got the app fullscreen on the device by using the latest PhoneGap 8.0.0 => https://blog.phonegap.com/phonegap-8-0-0-now-on-phonegap-build-ios-upgraded-to-xcode-9-2-9f350f5f775d

[jacquesdev]

Thanks @lpsBetty, it looks like that means upgrading to cordova-android@7, and unfortunately there are still a couple of plugins that I use that have not yet been updated to support that. But I guess that is the only way, so I will look at doing that update in the near future and close the issue assuming it works.

[moongng]

Check the splash screen setting, and adding:

in config.xml.

[jacquesdev]

@pvandrunen - probably a stupid question, but when you install npm install ionic-angular@legacy, my understanding is that it will install ionic to node_modules, which is at the same level as www (where the project's index file lives).

How do you include the ionic library in your ionic project's index file, because when I last to check you can't include anything above the www folder?

[jacquesdev]

Turns out - this was all related to the splash screen config (which to be honest still doesn't make sense why the splash screen should determine the resolution of your entire app). I basically followed the steps here: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/, with the main thing being I had to manually add the entry to config.xml... Thanks for everyone's help on this issue!

[BraydenGirard]

For anyone else experiencing this, I found an easy solution for myself. In Xcode you just need to make sure that CDVLaunchScreen is selected in the two areas I have highlighted here. For me they were blank before.

[donni106]

For me, setting Launch Screen File is enough.

@BraydenGirard have you found a solution to automatically set this? I have to manually take care of the selection after every cordova build ios.

[BraydenGirard]

@donni106 I usually manually set it, there are a couple things I manually set in Xcode cause I haven’t had the time to figure out the cordova stuff. Sorry I can’t be more helpful.