Splash screen has white area on iPhone X

[remisture]

Has anyone experienced the splash screen loading with a white area at the bottom?

Ionic 1.3.5.

<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">

[josandretto]

Yes, I had a similar problem. If using a launch storyboard, you can change the constraints to force the image to fill the entire screen. I fixed mine using the info in this stack overflow question: https://stackoverflow.com/questions/46322150/getting-a-white-space-at-bottom-of-iphone-x-screenxcode-9. I'm not sure how to fix this if you are using launch images.

[remisture]

I'm not sure what launch storyboard is, but i'll look it up. Thank you.

I have used ionic cordova resources --splash to generate my images and the settings in config.xml.

<platform name="ios">
   <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
   <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
   <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
   <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
   <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
   <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
   <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
   <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
   <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
   <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
   <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
   <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
</platform>

[wilsolutions]

I've ran into the same issue, unfortunately :( So, removing the viewport-fit=cover make the bottom flow properly but then gives another problem because now my tab bar is wayyy to the bottom =/

[Defcon0]

Same here, removing viewport-fit=coveris not an option since then the whole thing looks broken :-(

[rabruce]

If you peek into the xcode project/workspace then you should see something like this under resources https://i.stack.imgur.com/j6uu0.png (image is from that stackoverflow post above)

If iPhone X isn't filled out, that may be your problem. Make sure your ionic-cli is up to date and re-run ionic cordova resources as per this link.

Run a build and check out the LaunchImage again.

[Defcon0]

As mentioned here

https://forum.ionicframework.com/t/how-to-manually-edit-how-the-ionic-v1-launch-screen-resources-work-and-feed-images-xassets/110398

I myself have the problem that I have a splashscreen AI file sized 2732×2732px but ionic v1 cli simply doesn't generate the necessary Default-2436h.png. (also tried splash.png same size)

See:

I think this is a serious bug in ionic cli (maybe only in v1)??

[ehynds]

This is an issue with cordova-ios and appears to be fixed in v4.5.4 which came out yesterday.

https://issues.apache.org/jira/browse/CB-13411

[Defcon0]

cordova-ios 4.5.4 fixed the issue for me.

[clarkmcnally]

I am still having a problem generating the Default-2436h.png, here is my ionic info

cli packages: (/usr/local/lib/node_modules)

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

global packages:

cordova (Cordova CLI) : 7.0.1
Gulp CLI              : CLI version 3.9.1 Local version 3.9.1

local packages:

@ionic/app-scripts : 3.1.3
Cordova Platforms  : android 6.4.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2
Node       : v6.10.3
npm        : 3.10.10
OS         : macOS High Sierra
Xcode      : Xcode 9.1 Build version 9B55`

[mwiley63]

I was also able to fix this by upgrading cordova-ios (i.e. ionic cordova platform rm ios && ionic cordova platform add ios).