Ionic v1 - iPhone X Safe Regions/Notch Not Supported

[nickstucko]

Short description of the problem:

Ionic v1 does not currently support the iPhone X safe regions.

What behavior are you expecting?

For the tabs starter app to look like this: https://github.com/ionic-team/ionic-v1/issues/317#issuecomment-341152491

Steps to reproduce:

1. Create a new ionic v1 starter app: $ionic start ionic1 tabs --type=ionic1

2. Add the iOS platform: $ionic cordova platform add ios

3. Open the new iOS project in xCode and run the app using the iPhone X simulator. The iPhone X notch and safe regions are not supported.

Here is a screenshot:

$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.1.0 
    Gulp CLI              : CLI version 3.9.1 Local version 3.9.1

local packages:

    Cordova Platforms : ios 4.5.4
    Ionic Framework   : ionic1 1.3.4

System:

    Node  : v8.9.1
    npm   : 5.5.1 
    OS    : macOS High Sierra
    Xcode : Xcode 9.1 Build version 9B55 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

$ionic -v:

3.19.0

From everything I read - iPhone X should now be supported. Can anyone shed some light on this? Am I doing something wrong?

[pvandrunen]

You're 90% of the way there, I looked at the code changes in the repo and manually copied style changes from at least www/lib/ionic/scss/_platform.scss then rebuilt styles. Not great, but I don't know why styles weren't included when I updated ionic ...

[nickstucko]

@pvandrunen when I create the new ionic 1 starter app via the CLI - I can see the new CSS changes in _platform.scss

But I don't know why the CSS isn't being applied. Can you provide a little more detail on how to get it to work? I really appreciate your help.

[pvandrunen]

@NickyTheWrench I think that something went wonky with gulp. I've been running $ gulp sass manually, then $ ionic cordova prepare ios

You may also have to add ./scss/ionic.app.scss to your gulpfile.js

This is what mine looks like:

var paths = { sass: ['./scss/raptor.scss','./scss/fonts.scss','./scss/style.scss','./scss/_t13.scss','./scss/ionic.app.scss'] };

[nickstucko]

Hmm - that doesn't seem to work for me in my environment. Thanks again for your time though.

At this point I've tried building a clean ionic 1 starter app on both my macbook pro 15 - and my mac mini with a totally clean install of npm, ionic, cordova, xcode, etc - and this app just does not support iPhone X. It's super frustrating because every forum post, issue post, and even the ionic support team themselves say that iPhone X is supported for Ionic 1 :-(

[pvandrunen]

@NickyTheWrench it takes some work but you can get it going. I did do a clean v1 install with ionic v3 command line tool and noted that the header and footer did not have correct padding, I had to do this fix myself, but it DID go full screen.

With the exception of the bug I reported regarding the date field everything else seems to be working on iPhone X — again, it's taken me several hours of work to get my app to that point.

Phil

[nickstucko]

I guess I'm just at the mercy of the Ionic Team to get on this. I made the mistake of purchasing Creator (creator.ionic.io) - and learning Ionic this way. Unfortunately when I purchased Creator, Ionic 1 was the only version supported. So I learned Ionic 1 and had no idea I was learning the old version and would quickly have to relearn everything.

Creator still exports Ionic 1.3.3 - and after emailing the Ionic Support Team, they said it doesn't matter. They said Creator only exports the web assets and has nothing to do with iPhone X ...which to me didn't really make sense. I give up.

[nickstucko]

@pvandrunen Are you simply opening a command shell at your newly created starter app - running $gulp sass & $ionic cordova prepare ios - and the iPhone X padding is fixed?

[pvandrunen]

@NickyTheWrench No, for some reason I had to manually copy over the styles from the repo. I don't know why, I think I mentioned that in my list of things above. This is the commit with the style fixes. https://github.com/ionic-team/ionic-v1/commit/046beff33407b156de92eac41e8716d8e6d7af4d This is the raw file: https://raw.githubusercontent.com/ionic-team/ionic-v1/046beff33407b156de92eac41e8716d8e6d7af4d/scss/_platform.scss And then I open the shell and run $gulp sass & $ionic cordova prepare ios

I had to do a few other padding fixes myself as well:

.platform-ios {

  ion-content.scroll-content.ionic-scroll .scroll {
    padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
    padding-bottom: calc(constant(safe-area-inset-bottom) + 20px);
  }

  .has-footer {
    bottom: calc(env(safe-area-inset-bottom) + #{$bar-footer-height});
    bottom: calc(constant(safe-area-inset-bottom) + #{$bar-footer-height});
  }

  .has-subfooter {
    bottom: calc(env(safe-area-inset-bottom) + #{$bar-footer-height} + #{$bar-subfooter-height});
    bottom: calc(constant(safe-area-inset-bottom) + #{$bar-footer-height} + #{$bar-subfooter-height});
  }
}

.tabs {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(constant(safe-area-inset-bottom) + 49px);
  height: calc(env(safe-area-inset-bottom) + 49px);
}

[nickstucko]

Again I appreciate you taking the time to answer.

I think maybe the CLI and Framework was updated since you had to apply your fixes. All the iPhone X CSS Fixes that you linked are, in-fact...included in ionic.app.css, _platform.scss, etc. I even tried to put your custom CSS padding fixes within the <head> section of my index.html (replacing the SASS variables with their actual value) ....no luck :-(

But thanks again for trying and for your time helping.

[mhartington]

Hi there. Looks like you're version is out of date. Please update to 1.3.5, as the fixes are in there.

[nickstucko]

Hey @mhartington thanks for coming to the rescue.

I tried running npm i ionic-angular@legacy but $ionic info still shows 1.3.4 as the local framework.

I opened up my package.json file, and "ionic-angular": "^1.3.5", is listed under dependencies. Do you have any other suggestions? Is there any other info I can provide you to help debug?

Thanks again for your time.

[mhartington]

Make sure you check http://blog.ionicframework.com/ios-11-checklist/ as well. The Viewport-fit portion of the meta tag does not appear to be in the starter (will fix).

[nickstucko]

@mhartington Thank you!!!! The padding is there now. :-)

[joelebeau1]

@pvandrunen The additional padding style fixes you posted did the trick for me, thank you! I had the correct viewport-fit meta tag, the right version of ionc-angular@legacy, had built the lib/ionic/scss/_platform.scss styles correctly and was still stuck until I found your comment, so thanks!