iPhone X and Ionic?


#1

So Apple officially announced the iPhone X yesterday, with its funny little “notch” on the top of the screen.

Anybody played with the iOS simulator for the X yet and tried their Ionic app? Will everything just work?


Running Ionic 3 App in iPhone X Simulator... (UI issues!)
iOS 11 beta 9 with ionic 1 white bar issue
#2

In the iPhone X Simulator using Xcode 9 after building iOS with Ionic there are large gaps top and bottom. It reminds me of running apps on the iPhone 5 when the screen became vertically larger, you’d see the app run in a kind of “letterbox”. The letterbox on the iPhone X is white at the top and black at the bottom. Looks awful, but hopefully an Ionic update will fix it.

I’m concerned because I can see Apple rejecting apps submitted for iOS 11 that don’t make use of the full screen. I’m frantically compiling some stuff today using Xcode 8 in the hope that I can get it in to Apple before they start only accepting builds created with the latest GM seed.


#3

This is what it looks like right now with no changes at all:


(Maybe also with wrong settings…)

Both Cordova and Ionic is testing right now and trying to find out what and how to fix this. I am confident we will see progress quickly.


#4
  1. Add viewport-fit=cover to index.html:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">
  1. Add a Multi-image launch screen for automatically support new launch images in config.xml (details: https://github.com/apache/cordova-plugin-splashscreen):
<splash src="res/screen/ios/Default@2x~universal~anyany.png" />
<splash src="res/screen/ios/Default@3x~universal~anyany.png" />


iPhone X Status bar overlap
#6

Good answer. I have tried it and it works. Now I have a problem with the tab bar that joins the line that replaces the Home Button.


#7

+1, I have the same problem


#8

I have resolved the issue changing the background color of the MainViewController.xib for the tabbar color, besides doing the LaunchStoryboard change.


#9

Hi,

Thank you for your answer. Unfortunately, I still have my problem. Maybe one of the plugins I use on my project… :confused:


#11

Max and the Ionic team released a new version of the wkwebview plugin to solve the problem of the footer padding which I could confirm works (for Ionic >= 2 at least).

I just updated XCode 9, rebuild my app, tested with iPhone X, saw the problem, uninstalled/installed wkwebview plugin, rebuild my app, tested with iPhone X, problem solved.

See the last two posts there:

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

The plugin:

They have created a PR to help other people:


#12

So far, I’m not sure the status bar PR fixes the white space on top for ionic v1 apps. See iOS 11 beta 9 with ionic 1 white bar issue


#13

I edited my post, I use Ionic >= 2. In such a case, just updating wkwebview solve it.

Update: Re-updated my post, the plugin update seems to fix the footer but doesn’t fit the upper part of the viewport till the status bar to do so, follow solution of @ohh2ahh provided above


#14


The problem with the footer now is the “Home button” and the status bar too.


#15

Maybe that will be solve with this PR https://github.com/apache/cordova-plugin-statusbar/pull/85 too (see explanation and screenshot of @mhartington about the 20px size of the bar)?


#16

Maybe. What should be done to make the tabs have a space below for the Home Button?


#17

I guess someone has to come with a css solution?

You could open the Photos app in the debugger, they add an extra margin-bottom after the icon/text of the tabs…guess should do the same in css


#18

I’ve tried the solutions here and have gotten the gray bars to go away but no luck with the black bars, even after adding the single launch storyboard and patching in the cordova-status-bar changes. Not sure what else to try at this point.


#19

Try the updated PR. It worked for me (see this)


#20

I tried that but maybe i did it wrong, whats the best way to install these PR’s? just take the changed code and overwrite it in your plugin folder?


#21

Hold on, let me grab a v2 project so I can tell you exactly what all I did. I’m currently working on a v1. Will update in a bit (as long as I make things work with the v2 project before my flight takes off in an hour :wink: )


#22

Oh I’m also on v1, tried installing WK but that didnt seem to work for me either…