New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rounded edges of the iPhone X on ionic #317

Closed
kas84 opened this Issue Sep 16, 2017 · 56 comments

Comments

Projects
None yet
@kas84

kas84 commented Sep 16, 2017

Hi,

Are we going to have support for iPhone X UI on ionic V1?
captura de pantalla 2017-09-16 a las 20 39 17

I guess it also needs some kind of support from Cordova!

@kas84 kas84 changed the title from rounded edges of the iPhone X on ionic to Rounded edges of the iPhone X on ionic Sep 16, 2017

@revie

This comment has been minimized.

Show comment
Hide comment
@revie

revie Sep 19, 2017

These suggestions from Stack Overflow seemed to help:
https://stackoverflow.com/questions/46232812/cordova-app-not-displaying-correctly-on-iphone-x-simulator

Still got a whole lot of Ionic v1 absolute positioning styles to override, but it's something at least. Best of luck!

revie commented Sep 19, 2017

These suggestions from Stack Overflow seemed to help:
https://stackoverflow.com/questions/46232812/cordova-app-not-displaying-correctly-on-iphone-x-simulator

Still got a whole lot of Ionic v1 absolute positioning styles to override, but it's something at least. Best of luck!

@kensodemann

This comment has been minimized.

Show comment
Hide comment
@kensodemann

kensodemann Sep 23, 2017

We recently went through and cleaned up this experience for Ionic v3. See this post for details https://blog.ionic.io/ios-11-checklist/

Some (but not all) of that is also applicable to v1.

Next week, we will be going through v1 and making adjustments there for iOS 11 and the iPhone X. I will keep you posted on that progress.

kensodemann commented Sep 23, 2017

We recently went through and cleaned up this experience for Ionic v3. See this post for details https://blog.ionic.io/ios-11-checklist/

Some (but not all) of that is also applicable to v1.

Next week, we will be going through v1 and making adjustments there for iOS 11 and the iPhone X. I will keep you posted on that progress.

@kas84

This comment has been minimized.

Show comment
Hide comment
@kas84

kas84 Sep 27, 2017

Thanks! That's awesome!!

kas84 commented Sep 27, 2017

Thanks! That's awesome!!

@mlynch

This comment has been minimized.

Show comment
Hide comment
@mlynch

mlynch Sep 29, 2017

Member

Just added the viewport-fit=cover setting to viewport meta tags in app base, that's step 1

Member

mlynch commented Sep 29, 2017

Just added the viewport-fit=cover setting to viewport meta tags in app base, that's step 1

@mlynch

This comment has been minimized.

Show comment
Hide comment
@mlynch

mlynch Sep 29, 2017

Member

We are working on a long term fix, but for those needing a solution today, here is what you should do (for tabbed apps in portrait mode):

First, read our iOS 11 blog and follow the steps on installing WKWebView, the updated status bar plugin, and the viewport fit meta tag change. WKWebView is required, but be mindful of the new CORS enforcement.

Next, add this CSS in your <head> after the Ionic CSS include:

<style>
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
  height: calc(44px + constant(safe-area-inset-top));
}


.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
  margin-top: constant(safe-area-inset-top);
}

div.tab-nav.tabs {
  height: calc(49px + constant(safe-area-inset-bottom));
}

ion-content.padding.scroll-content.ionic-scroll.has-header.has-tabs {
  top: calc(64px + constant(safe-area-inset-top));
}
</style>

With these changes my starter tabs app looks like this now:

screen shot 2017-09-28 at 9 51 00 pm

Note

This is not an official fix and is only a workaround.

We will have an official fix for all apps very soon, but this might help some that need something today for one reason or another

Member

mlynch commented Sep 29, 2017

We are working on a long term fix, but for those needing a solution today, here is what you should do (for tabbed apps in portrait mode):

First, read our iOS 11 blog and follow the steps on installing WKWebView, the updated status bar plugin, and the viewport fit meta tag change. WKWebView is required, but be mindful of the new CORS enforcement.

Next, add this CSS in your <head> after the Ionic CSS include:

<style>
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
  height: calc(44px + constant(safe-area-inset-top));
}


.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
  margin-top: constant(safe-area-inset-top);
}

div.tab-nav.tabs {
  height: calc(49px + constant(safe-area-inset-bottom));
}

ion-content.padding.scroll-content.ionic-scroll.has-header.has-tabs {
  top: calc(64px + constant(safe-area-inset-top));
}
</style>

With these changes my starter tabs app looks like this now:

screen shot 2017-09-28 at 9 51 00 pm

Note

This is not an official fix and is only a workaround.

We will have an official fix for all apps very soon, but this might help some that need something today for one reason or another

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Oct 5, 2017

Please also look into landscape mode in iPhone X (IonicV1). Side nav is not good either.

screen shot 2017-10-05 at 2 26 30 pm

screen shot 2017-10-05 at 2 26 47 pm

stripathix commented Oct 5, 2017

Please also look into landscape mode in iPhone X (IonicV1). Side nav is not good either.

screen shot 2017-10-05 at 2 26 30 pm

screen shot 2017-10-05 at 2 26 47 pm

@ruairisdad

This comment has been minimized.

Show comment
Hide comment
@ruairisdad

ruairisdad Oct 17, 2017

Thanks!

I needed to make a few tweaks to make this work for me. There was a 20px white bar at the top of the ion-content, and the bottom of the ion-content was partially-covered by the tabs.

ion-content.padding.scroll-content.ionic-scroll.has-header.has-tabs { top: calc(44px + constant(safe-area-inset-top)); } ion-content.padding.scroll-content.ionic-scroll.has-header.has-tabs { bottom: calc(49px + constant(safe-area-inset-bottom)); }

I just locked down the app to portrait mode so I wouldn't need to worry about the notch in landscape mode

ruairisdad commented Oct 17, 2017

Thanks!

I needed to make a few tweaks to make this work for me. There was a 20px white bar at the top of the ion-content, and the bottom of the ion-content was partially-covered by the tabs.

ion-content.padding.scroll-content.ionic-scroll.has-header.has-tabs { top: calc(44px + constant(safe-area-inset-top)); } ion-content.padding.scroll-content.ionic-scroll.has-header.has-tabs { bottom: calc(49px + constant(safe-area-inset-bottom)); }

I just locked down the app to portrait mode so I wouldn't need to worry about the notch in landscape mode

@mark-veenstra

This comment has been minimized.

Show comment
Hide comment
@mark-veenstra

mark-veenstra Oct 17, 2017

@mlynch When will there be the official update on v1?

mark-veenstra commented Oct 17, 2017

@mlynch When will there be the official update on v1?

@smuaq

This comment has been minimized.

Show comment
Hide comment

smuaq commented Oct 24, 2017

@mlynch

This comment has been minimized.

Show comment
Hide comment
@mlynch

mlynch Oct 24, 2017

Member

Yep, release incoming very soon (this week)

Member

mlynch commented Oct 24, 2017

Yep, release incoming very soon (this week)

@mhartington

This comment has been minimized.

Show comment
Hide comment
@mhartington

mhartington Oct 25, 2017

Member

Hi everyone! 1.3.4 has been released with the necessary iPhoneX updates.

Please update your bower package to ionic-team/ionic-bower#1.3.4 and run bower install, or run

bower install ionic-team/ionic-bower#1.3.4
Member

mhartington commented Oct 25, 2017

Hi everyone! 1.3.4 has been released with the necessary iPhoneX updates.

Please update your bower package to ionic-team/ionic-bower#1.3.4 and run bower install, or run

bower install ionic-team/ionic-bower#1.3.4
@mobidev111

This comment has been minimized.

Show comment
Hide comment
@mobidev111

mobidev111 Oct 25, 2017

Great. Can you publish it to npm? At least v1.3.2 is available at the ionic-angular package

mobidev111 commented Oct 25, 2017

Great. Can you publish it to npm? At least v1.3.2 is available at the ionic-angular package

@mhartington

This comment has been minimized.

Show comment
Hide comment
@mhartington

mhartington Oct 25, 2017

Member

@mobidev111 sure thing!

npm i ionic-angular@1.3.4-201710251625

UPDATE:

npm i ionic-angular@legacy
Member

mhartington commented Oct 25, 2017

@mobidev111 sure thing!

npm i ionic-angular@1.3.4-201710251625

UPDATE:

npm i ionic-angular@legacy
@kas84

This comment has been minimized.

Show comment
Hide comment
@kas84

kas84 Oct 26, 2017

That's awesome!

By the way, I've forked cordova-plugin-migrate-localstorage so that it works with ionic's webview you can download it here. https://github.com/kas84/cordova-plugin-migrate-localstorage

And also recently moved to https://github.com/ionic-team/cordova-plugin-localstorage-backup so that when iOS resets localStorage, you can rely on it anyway, I encourage those using localStorage to use this plugin too since it backups localStorage in iOS prefs.

kas84 commented Oct 26, 2017

That's awesome!

By the way, I've forked cordova-plugin-migrate-localstorage so that it works with ionic's webview you can download it here. https://github.com/kas84/cordova-plugin-migrate-localstorage

And also recently moved to https://github.com/ionic-team/cordova-plugin-localstorage-backup so that when iOS resets localStorage, you can rely on it anyway, I encourage those using localStorage to use this plugin too since it backups localStorage in iOS prefs.

@m-vdv

This comment has been minimized.

Show comment
Hide comment
@m-vdv

m-vdv commented Oct 26, 2017

@geshub

This comment has been minimized.

Show comment
Hide comment
@geshub

geshub Oct 29, 2017

Hi,

Since i updated to the last version i've got a bigger header bar but the button don't have the new margin-top applied:

captura de pantalla 2017-10-29 a las 11 31 13

When i have a look in safari i can see:

captura de pantalla 2017-10-29 a las 11 36 56

I know it's probably due to my app CSS but has anyone had the same problem or can somebody help ?

geshub commented Oct 29, 2017

Hi,

Since i updated to the last version i've got a bigger header bar but the button don't have the new margin-top applied:

captura de pantalla 2017-10-29 a las 11 31 13

When i have a look in safari i can see:

captura de pantalla 2017-10-29 a las 11 36 56

I know it's probably due to my app CSS but has anyone had the same problem or can somebody help ?

@josandretto

This comment has been minimized.

Show comment
Hide comment
@josandretto

josandretto Oct 30, 2017

@geshub I've seen the same thing with the bigger header but title and buttons in the header do not respect the safe areas after updating to the newest version.

josandretto commented Oct 30, 2017

@geshub I've seen the same thing with the bigger header but title and buttons in the header do not respect the safe areas after updating to the newest version.

@mhartington

This comment has been minimized.

Show comment
Hide comment
@mhartington

mhartington Oct 30, 2017

Member

Hmm, Im not able to replicate with a fresh project created from the CLI. And Im certain that the correct CSS is in place

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

Member

mhartington commented Oct 30, 2017

Hmm, Im not able to replicate with a fresh project created from the CLI. And Im certain that the correct CSS is in place

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

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Oct 31, 2017

Why I am getting white color in status bar in iPhone X

screen shot 2017-10-31 at 1 02 47 pm

Updated to latest ionic@1.3.4

I have these things in place:

And

Works fine on iPhone 7, 8 with iOS 11.x. But getting that white bar in iPhone X.

This is iPhone6 with iOS11
screen shot 2017-10-31 at 1 58 32 pm

stripathix commented Oct 31, 2017

Why I am getting white color in status bar in iPhone X

screen shot 2017-10-31 at 1 02 47 pm

Updated to latest ionic@1.3.4

I have these things in place:

And

Works fine on iPhone 7, 8 with iOS 11.x. But getting that white bar in iPhone X.

This is iPhone6 with iOS11
screen shot 2017-10-31 at 1 58 32 pm

@ruairisdad

This comment has been minimized.

Show comment
Hide comment
@ruairisdad

ruairisdad Oct 31, 2017

@geshub It looks like your CSS is missing a line. I don't think iOS 11.0 understands the env() notation, so a margin-top: constant(safe-area-inset-top); preceeding line is needed. env() is to be used in iOS 11+. See https://github.com/w3c/csswg-drafts/issues/1693

ruairisdad commented Oct 31, 2017

@geshub It looks like your CSS is missing a line. I don't think iOS 11.0 understands the env() notation, so a margin-top: constant(safe-area-inset-top); preceeding line is needed. env() is to be used in iOS 11+. See https://github.com/w3c/csswg-drafts/issues/1693

@revie

This comment has been minimized.

Show comment
Hide comment
@revie

revie Oct 31, 2017

@stripathix you're probably missing the "viewport-fit=cover" in your tag in index.html. Make sure the tag looks something like:
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, width=device-width, height=device-height, viewport-fit=cover">

revie commented Oct 31, 2017

@stripathix you're probably missing the "viewport-fit=cover" in your tag in index.html. Make sure the tag looks something like:
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, width=device-width, height=device-height, viewport-fit=cover">

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix commented Oct 31, 2017

@revie I do have that tag in the meta tag.
Meta tag looks like this in my index.html :

My issue is exactly same as this:
https://issues.apache.org/jira/browse/CB-12886?focusedCommentId=16226808&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-16226808

@marioshtika

This comment has been minimized.

Show comment
Hide comment
@marioshtika

marioshtika Nov 1, 2017

I had the same problem with @stripathix and after updating cordova-plugin-statusbar with the github link as mention in https://blog.ionic.io/ios-11-checklist/, now I have the same problem with @geshub (kind of - the spaces of the header are too small)

screen shot 2017-11-01 at 16 39 28

marioshtika commented Nov 1, 2017

I had the same problem with @stripathix and after updating cordova-plugin-statusbar with the github link as mention in https://blog.ionic.io/ios-11-checklist/, now I have the same problem with @geshub (kind of - the spaces of the header are too small)

screen shot 2017-11-01 at 16 39 28

@mhartington

This comment has been minimized.

Show comment
Hide comment
@mhartington

mhartington Nov 1, 2017

Member

Hi. Please provide detailed steps on how to reproduce. I cannot duplicate this issue at all, so a sample project on github would be great.

Member

mhartington commented Nov 1, 2017

Hi. Please provide detailed steps on how to reproduce. I cannot duplicate this issue at all, so a sample project on github would be great.

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Nov 1, 2017

@marioshtika to what version you updated your cordova-plugin-statusbar plugin?

In npm latest is 2.2.3 and it's like that since 23 April.

I have this in my config.xml

stripathix commented Nov 1, 2017

@marioshtika to what version you updated your cordova-plugin-statusbar plugin?

In npm latest is 2.2.3 and it's like that since 23 April.

I have this in my config.xml

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Nov 1, 2017

I see there is an unmerged PR for cordova-plugin-statusbar . I am updating my plugin to that PR and also I need to update my xCode to 9.1, maybe that will solve the issue.

stripathix commented Nov 1, 2017

I see there is an unmerged PR for cordova-plugin-statusbar . I am updating my plugin to that PR and also I need to update my xCode to 9.1, maybe that will solve the issue.

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Nov 1, 2017

After updating to unmerged PR for cordova-plugin-statusbar. My status bar white problem is gone but it looks like this now. Looks like some CSS issue.

screen shot 2017-11-01 at 8 46 46 pm

stripathix commented Nov 1, 2017

After updating to unmerged PR for cordova-plugin-statusbar. My status bar white problem is gone but it looks like this now. Looks like some CSS issue.

screen shot 2017-11-01 at 8 46 46 pm

@mhartington

This comment has been minimized.

Show comment
Hide comment
@mhartington

mhartington Nov 1, 2017

Member

The css issues could be from your code. Again, I cannot replicate this locally in my tests.
screen shot 2017-11-01 at 12 05 41 pm

Member

mhartington commented Nov 1, 2017

The css issues could be from your code. Again, I cannot replicate this locally in my tests.
screen shot 2017-11-01 at 12 05 41 pm

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Nov 1, 2017

@mhartington absolutely it must be some of my CSS that's messing up. I am updating my xCode to the latest and will test in that. If it fails there I will provide sample app in which issue can be replicated.

stripathix commented Nov 1, 2017

@mhartington absolutely it must be some of my CSS that's messing up. I am updating my xCode to the latest and will test in that. If it fails there I will provide sample app in which issue can be replicated.

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Nov 1, 2017

Just a heads up that I am seeing red line passing through this style:
margin-top: env(safe-area-inset-top);
Maybe iPhone not able to understand env(safe-area-inset-top)

If margin-top:20px then header looks like this
screen shot 2017-11-01 at 9 44 49 pm

If I change marginTop to 40px like margin-top:40px then header looks correct:
screen shot 2017-11-01 at 9 45 09 pm

stripathix commented Nov 1, 2017

Just a heads up that I am seeing red line passing through this style:
margin-top: env(safe-area-inset-top);
Maybe iPhone not able to understand env(safe-area-inset-top)

If margin-top:20px then header looks like this
screen shot 2017-11-01 at 9 44 49 pm

If I change marginTop to 40px like margin-top:40px then header looks correct:
screen shot 2017-11-01 at 9 45 09 pm

@mhartington

This comment has been minimized.

Show comment
Hide comment
@mhartington

mhartington Nov 1, 2017

Member

Your css output file is missing the constant version of the function, which is needed. I'm guess you have a custom build process and that is removing the extra rule, which is in fact there

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

Member

mhartington commented Nov 1, 2017

Your css output file is missing the constant version of the function, which is needed. I'm guess you have a custom build process and that is removing the extra rule, which is in fact there

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

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Nov 1, 2017

Yeah, actually I am using Ionic CSS/JS files referenced in the index.html. Not using SCSS. Does Ionic.css not contain complete compiled CSS?

screen shot 2017-11-01 at 9 51 53 pm

stripathix commented Nov 1, 2017

Yeah, actually I am using Ionic CSS/JS files referenced in the index.html. Not using SCSS. Does Ionic.css not contain complete compiled CSS?

screen shot 2017-11-01 at 9 51 53 pm

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Nov 1, 2017

To update my application to Ionic@1.3.4. I did following steps:

  1. Created new Ionic project from Ionic-CLI using following command
    ionic start helloworld --type ionic1

  2. Then I copied all files inside /helloworld/www/lib/ionic/ to my project /lib/ionic/

stripathix commented Nov 1, 2017

To update my application to Ionic@1.3.4. I did following steps:

  1. Created new Ionic project from Ionic-CLI using following command
    ionic start helloworld --type ionic1

  2. Then I copied all files inside /helloworld/www/lib/ionic/ to my project /lib/ionic/

@mhartington

This comment has been minimized.

Show comment
Hide comment
@mhartington

mhartington Nov 1, 2017

Member

It's there
screen shot 2017-11-01 at 12 28 15 pm

What I'm guessing is you have your own build pipe-line? Can you Please post a project example to debug.

Member

mhartington commented Nov 1, 2017

It's there
screen shot 2017-11-01 at 12 28 15 pm

What I'm guessing is you have your own build pipe-line? Can you Please post a project example to debug.

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Nov 1, 2017

Yes, I am having my own build code in nodeJS. I am working on posting sample project. Will push it soon.

stripathix commented Nov 1, 2017

Yes, I am having my own build code in nodeJS. I am working on posting sample project. Will push it soon.

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Nov 1, 2017

You are totally awesome @mhartington .
It is the minification of file that is missing constants of scss.

But I have found that ionic.min.css is also missing the constant. If I use ionic.min.css then it looks like this:
screen shot 2017-11-01 at 10 26 34 pm

But if I use ionic.css then it works perfectly :-)
screen shot 2017-11-01 at 10 30 04 pm

You can easily reproduce this issue in default Ionic project also If in index.html you use ionic.min.css instead of ionic.css
screen shot 2017-11-01 at 10 35 55 pm

stripathix commented Nov 1, 2017

You are totally awesome @mhartington .
It is the minification of file that is missing constants of scss.

But I have found that ionic.min.css is also missing the constant. If I use ionic.min.css then it looks like this:
screen shot 2017-11-01 at 10 26 34 pm

But if I use ionic.css then it works perfectly :-)
screen shot 2017-11-01 at 10 30 04 pm

You can easily reproduce this issue in default Ionic project also If in index.html you use ionic.min.css instead of ionic.css
screen shot 2017-11-01 at 10 35 55 pm

@mhartington

This comment has been minimized.

Show comment
Hide comment
@mhartington

mhartington Nov 1, 2017

Member

Ahh, alright, I know whats up there.

Give me 15mins to finish lunch and I'll publish something

Member

mhartington commented Nov 1, 2017

Ahh, alright, I know whats up there.

Give me 15mins to finish lunch and I'll publish something

@mobidev111

This comment has been minimized.

Show comment
Hide comment
@mobidev111

mobidev111 Nov 1, 2017

related when you're on this: there's a scss syntax error in _platform.scss (missing closing brackets), see #328

mobidev111 commented Nov 1, 2017

related when you're on this: there's a scss syntax error in _platform.scss (missing closing brackets), see #328

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Nov 2, 2017

Hi @mhartington , I see a new version is released here:
8f60b38

But when I do this command I am still getting "version": "1.3.4",
ionic start helloworld --type ionic1

Maybe new version is still not live on npm/bower/ioniccli

stripathix commented Nov 2, 2017

Hi @mhartington , I see a new version is released here:
8f60b38

But when I do this command I am still getting "version": "1.3.4",
ionic start helloworld --type ionic1

Maybe new version is still not live on npm/bower/ioniccli

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Nov 2, 2017

Few more issues regarding the iPhoneX notch with different orientation.

  1. SideMenu template with orientation Landscape not right

screen shot 2017-11-02 at 1 24 51 pm

**Solution maybe this for iPhoneX media query**
.item-complex.item-icon-left .item-content {
          padding-left: 80px;
      }
      .item-complex.item-icon-left .item-content .icon {
          left: calc(constant(safe-area-inset-left) + 40px);
      }
  1. An issue with the header when orientation changes. Steps to reproduce
    a) Open application in portrait mode
    b) Then change orientation to Landscape
    c) Change it back to portrait... kaboom

screen shot 2017-11-02 at 1 25 13 pm

Just in case if need test application:
https://github.com/stripathix/iPhoneX-testing-app

stripathix commented Nov 2, 2017

Few more issues regarding the iPhoneX notch with different orientation.

  1. SideMenu template with orientation Landscape not right

screen shot 2017-11-02 at 1 24 51 pm

**Solution maybe this for iPhoneX media query**
.item-complex.item-icon-left .item-content {
          padding-left: 80px;
      }
      .item-complex.item-icon-left .item-content .icon {
          left: calc(constant(safe-area-inset-left) + 40px);
      }
  1. An issue with the header when orientation changes. Steps to reproduce
    a) Open application in portrait mode
    b) Then change orientation to Landscape
    c) Change it back to portrait... kaboom

screen shot 2017-11-02 at 1 25 13 pm

Just in case if need test application:
https://github.com/stripathix/iPhoneX-testing-app

@mhartington

This comment has been minimized.

Show comment
Hide comment
@mhartington

mhartington Nov 2, 2017

Member

The screen orientation change issue is a known UIWebview bug. You need to update to WKWebview, as there is not way to solve this in native for UIWebview.

And that was just the commit, i haven't released anything yet.

Member

mhartington commented Nov 2, 2017

The screen orientation change issue is a known UIWebview bug. You need to update to WKWebview, as there is not way to solve this in native for UIWebview.

And that was just the commit, i haven't released anything yet.

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Nov 2, 2017

Thanks for the update. Actually, I am not able to run the application with WkWebview enabled in the simulator, that's why I was running the app under UIWebView. Good to know that it will be fine on real device :-) .

Though application works on a real device with wkwebview but does not work in the simulator. I see this screen always If I add wkwebview pluign in default ionic project.
https://github.com/stripathix/iPhoneX-testing-app

screen shot 2017-11-02 at 7 45 03 pm

Not sure what's going there :-( .

Don't have iPhoneX and no plans to buy it also lolz...

stripathix commented Nov 2, 2017

Thanks for the update. Actually, I am not able to run the application with WkWebview enabled in the simulator, that's why I was running the app under UIWebView. Good to know that it will be fine on real device :-) .

Though application works on a real device with wkwebview but does not work in the simulator. I see this screen always If I add wkwebview pluign in default ionic project.
https://github.com/stripathix/iPhoneX-testing-app

screen shot 2017-11-02 at 7 45 03 pm

Not sure what's going there :-( .

Don't have iPhoneX and no plans to buy it also lolz...

@mhartington

This comment has been minimized.

Show comment
Hide comment
@mhartington

mhartington Nov 2, 2017

Member

I think you might have something wonky in the setup.

ionic cordova plugin add cordova-plugin-ionic-webview

is working fine on my end.

Member

mhartington commented Nov 2, 2017

I think you might have something wonky in the setup.

ionic cordova plugin add cordova-plugin-ionic-webview

is working fine on my end.

@mhartington

This comment has been minimized.

Show comment
Hide comment
@mhartington

mhartington Nov 2, 2017

Member

bower install ionic-team/ionic-bower#1.3.5 should fix the css padding issue.

Member

mhartington commented Nov 2, 2017

bower install ionic-team/ionic-bower#1.3.5 should fix the css padding issue.

@mobidev111

This comment has been minimized.

Show comment
Hide comment
@mobidev111

mobidev111 Nov 2, 2017

please publish this version to npm as well - sorry for bugging..

mobidev111 commented Nov 2, 2017

please publish this version to npm as well - sorry for bugging..

@mhartington

This comment has been minimized.

Show comment
Hide comment
@mhartington

mhartington Nov 2, 2017

Member

npm i ionic-angular@legacy

Member

mhartington commented Nov 2, 2017

npm i ionic-angular@legacy

@sbasi5576

This comment has been minimized.

Show comment
Hide comment
@sbasi5576

sbasi5576 Nov 5, 2017

I used WKWebView on Ionic v1 project. It won't let me connect to my web services even with ATS Transport set to Arbitrary Yes. Ended up uninstalling it. I have installed the ionic bower 1.3.5 in my project. I have the latest version of ionic 3.16 on my machine. May be downgrading it to ionic 1.78 would have helped. But when I tried downgrading by removing Ionic 3 and installing ionic1 - the ionic 1 would not show up in my /usr/local/bin. I am on Mac OSX. Any tips?

sbasi5576 commented Nov 5, 2017

I used WKWebView on Ionic v1 project. It won't let me connect to my web services even with ATS Transport set to Arbitrary Yes. Ended up uninstalling it. I have installed the ionic bower 1.3.5 in my project. I have the latest version of ionic 3.16 on my machine. May be downgrading it to ionic 1.78 would have helped. But when I tried downgrading by removing Ionic 3 and installing ionic1 - the ionic 1 would not show up in my /usr/local/bin. I am on Mac OSX. Any tips?

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Nov 6, 2017

For Ionic1 footer is not right with iPhoneX:

screen shot 2017-11-06 at 4 05 56 pm

screen shot 2017-11-06 at 4 07 57 pm

stripathix commented Nov 6, 2017

For Ionic1 footer is not right with iPhoneX:

screen shot 2017-11-06 at 4 05 56 pm

screen shot 2017-11-06 at 4 07 57 pm

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Nov 6, 2017

Is it possible to disable Landscape mode for iPhoneX only?

stripathix commented Nov 6, 2017

Is it possible to disable Landscape mode for iPhoneX only?

@josandretto

This comment has been minimized.

Show comment
Hide comment
@josandretto

josandretto Nov 6, 2017

@stripathix, yes. You can use cordova-plugin-screen-orientation to set the orientation to portrait. For example something like this in app.js:

var iPhoneX = ionic.Platform.isIOS() && $window.screen.height === 812 && $window.screen.width === 375;

if (iPhoneX) {
window.screen.orientation.lock('portrait'​);
}

josandretto commented Nov 6, 2017

@stripathix, yes. You can use cordova-plugin-screen-orientation to set the orientation to portrait. For example something like this in app.js:

var iPhoneX = ionic.Platform.isIOS() && $window.screen.height === 812 && $window.screen.width === 375;

if (iPhoneX) {
window.screen.orientation.lock('portrait'​);
}
@mlynch

This comment has been minimized.

Show comment
Hide comment
@mlynch

mlynch Nov 6, 2017

Member

@sbasi5576 that's due to WKWebView enforcing CORS (like a normal browser). To get around that, add localhost:8080 to your allowed origins on the server

Member

mlynch commented Nov 6, 2017

@sbasi5576 that's due to WKWebView enforcing CORS (like a normal browser). To get around that, add localhost:8080 to your allowed origins on the server

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Nov 6, 2017

@josandretto I guess that will not handle landscape mode splash screen or will it?

stripathix commented Nov 6, 2017

@josandretto I guess that will not handle landscape mode splash screen or will it?

@mhartington

This comment has been minimized.

Show comment
Hide comment
@mhartington

mhartington Nov 6, 2017

Member

Orientation can be locked via the config.xml

http://cordova.apache.org/docs/en/latest/config_ref/index.html

Member

mhartington commented Nov 6, 2017

Orientation can be locked via the config.xml

http://cordova.apache.org/docs/en/latest/config_ref/index.html

@josandretto

This comment has been minimized.

Show comment
Hide comment
@josandretto

josandretto Nov 6, 2017

@stripathix, I would guess not since the splash screen probably shows up before app.js executes. You might be able to do that with cordova-plugin-splashscreen and then define the splash screen for landscape iPhone X in config.xml.

josandretto commented Nov 6, 2017

@stripathix, I would guess not since the splash screen probably shows up before app.js executes. You might be able to do that with cordova-plugin-splashscreen and then define the splash screen for landscape iPhone X in config.xml.

@stripathix

This comment has been minimized.

Show comment
Hide comment
@stripathix

stripathix Nov 6, 2017

@josandretto thanks for the help. Anyways now I am doing this by a shell script to manipulate .plist file.

cd platforms cd ios cd WeatherSpork.xcodeproj sed -i "" '/AdSupport.framework/d' project.pbxproj sed -i "" '/libAdIdAccess/d' project.pbxproj cd .. cd WeatherSpork sed -i "" '1,/UIInterfaceOrientationLandscapeLeft/{/UIInterfaceOrientationLandscapeLeft/d;}' WeatherSpork-Info.plist sed -i "" '1,/UIInterfaceOrientationLandscapeRight/{/UIInterfaceOrientationLandscapeRight/d;}' WeatherSpork-Info.plist

stripathix commented Nov 6, 2017

@josandretto thanks for the help. Anyways now I am doing this by a shell script to manipulate .plist file.

cd platforms cd ios cd WeatherSpork.xcodeproj sed -i "" '/AdSupport.framework/d' project.pbxproj sed -i "" '/libAdIdAccess/d' project.pbxproj cd .. cd WeatherSpork sed -i "" '1,/UIInterfaceOrientationLandscapeLeft/{/UIInterfaceOrientationLandscapeLeft/d;}' WeatherSpork-Info.plist sed -i "" '1,/UIInterfaceOrientationLandscapeRight/{/UIInterfaceOrientationLandscapeRight/d;}' WeatherSpork-Info.plist

@mhartington

This comment has been minimized.

Show comment
Hide comment
@mhartington

mhartington Nov 6, 2017

Member

Hey folk! Since the original issue posted here has been solved, I'm going to lock this issue. If you have questions regarding anything WKWebview related, please post them on the Forum! Thanks!

Member

mhartington commented Nov 6, 2017

Hey folk! Since the original issue posted here has been solved, I'm going to lock this issue. If you have questions regarding anything WKWebview related, please post them on the Forum! Thanks!

@ionic-team ionic-team locked and limited conversation to collaborators Nov 6, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.