AngularJs Viewport-fit=cover not working on IphoneX

[iChuaNz]

Note: If you are having problems formatting your issue please refer to this article on using markdown in Github:

https://guides.github.com/features/mastering-markdown/

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/ http://ionicworldwide.herokuapp.com/

Short description of the problem:

I had tried all sorts of way to solve the problem but it seems to be the viewport-fit=cover never ever cover the whole screen ("save-area" part). Please help

-Ionic info Cordova CLI: 6.5.0 Ionic Framework Version: 1.3.5 Ionic CLI Version: 2.1.18 Ionic App Lib Version: 2.1.9 ios-deploy version: Not installed ios-sim version: Not installed OS: macOS Sierra Node Version: v6.11.4 Xcode version: Xcode 9.1 Build version 9B55

ionic -v 2.1.18

cordova -v 6.5.0

npm -v 5.5.1

[iChuaNz]

config.xml

config.pdf

[pougin]

Spent about 3 days on this issue. Found 2 points that killed my time:

1. read this article first. You missed a 2732 width splash. DO upgrade your ionic cli and provide 1024 icon source and 2732 splash source. Then generate your icons and splashes.

2. check your gulp file. Check that whether you are using gulp-minify-css which will combine properties with same name if not right configured. In my case, my _platform.scss was minified from

> * { margin-top: $ios-statusbar-height; margin-top: constant(safe-area-inset-top); margin-top: env(safe-area-inset-top); }

to

> * {margin-top: 20px;margin-top: env(safe-area-inset-top);}

You can use gulp-clean-css instead.

[iChuaNz]

It worked, Thanks for sharing me your experiences. It sure speed up my process

[iChuaNz]

One more question My "Loading" Splash screen now for all devices are currently blank. Is it causes by the new 2732 width splash? so I had to draw a new Loading screen ?

[iChuaNz]

[iChuaNz]

so I tried with a dummy splash screen, it works fine now. but now I'm facing the problem when I open the app (the bottom safe area was white for like 1-2sec) then it stretch all the way down to cover the bottom white area. so it seems like my splash screen is like hopping down. After that the app works completely normal

[dimitri320]

I've been on this issue for a week now, and couldn't find any solutions. Nothing that was suggested online works for me for reasons beyond my understanding.

Can you explain where to find this Gulp file? I've found many such files in various directories, but I've got no clue what to do with them...

[shrijan]

constant(safe-area-inset-bottom) doesn't work with ios 11.2 and xcode 9.2

[vasuvuggu]

Issue resolved, with the new project creation and update your codebase there itself during xcode updation to 11, without doing any of those changes. incase app icon display issues follows this link to resolve: https://stackoverflow.com/questions/46421066/app-icon-missing-ios-11