Rounded edges of the iPhone X on ionic #317

kas84 · 2017-09-16T18:40:31Z

Hi,

Are we going to have support for iPhone X UI on ionic V1?

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

revie · 2017-09-19T23:17:18Z

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 · 2017-09-23T11:02:01Z

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 · 2017-09-27T09:13:10Z

Thanks! That's awesome!!

mlynch · 2017-09-29T02:24:34Z

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

mlynch · 2017-09-29T03:00:54Z

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:

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 · 2017-10-05T09:06:52Z

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

ruairisdad · 2017-10-17T03:28:25Z

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 · 2017-10-17T06:27:27Z

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

smuaq · 2017-10-24T20:02:38Z

Coming soon I guess: https://twitter.com/mhartington/status/920070473609830401

mlynch · 2017-10-24T20:06:31Z

Yep, release incoming very soon (this week)

mhartington · 2017-10-25T14:54:44Z

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 · 2017-10-25T15:10:46Z

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

mhartington · 2017-10-25T16:27:21Z

@mobidev111 sure thing!

npm i ionic-angular@1.3.4-201710251625

UPDATE:

npm i ionic-angular@legacy

kas84 · 2017-10-26T10:43:54Z

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 · 2017-10-26T14:52:02Z

Please also update the changelog here: https://github.com/ionic-team/ionic-v1/blob/master/CHANGELOG.md

geshub · 2017-10-29T11:41:28Z

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:

When i have a look in safari i can see:

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

josandretto · 2017-10-30T01:15:46Z

@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 · 2017-10-30T14:14:49Z

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

ionic-v1/scss/_platform.scss

Lines 21 to 25 in fc404f9

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

stripathix · 2017-10-31T07:39:29Z

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

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

ruairisdad · 2017-10-31T09:38:26Z

@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 · 2017-10-31T18:03:44Z

@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 · 2017-10-31T19:54:07Z

@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 · 2017-11-01T14:43:31Z

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)

mhartington · 2017-11-01T14:44:32Z

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 · 2017-11-01T15:00:51Z

@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 · 2017-11-01T15:09:46Z

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 · 2017-11-01T15:20:36Z

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.

mhartington · 2017-11-01T16:06:04Z

The css issues could be from your code. Again, I cannot replicate this locally in my tests.

stripathix · 2017-11-01T16:11:21Z

@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 · 2017-11-01T16:18:23Z

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

If I change marginTop to 40px like margin-top:40px then header looks correct:

mhartington · 2017-11-01T16:20:11Z

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

ionic-v1/scss/_platform.scss

Lines 21 to 25 in fc404f9

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

stripathix · 2017-11-01T16:24:21Z

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?

stripathix · 2017-11-01T16:28:50Z

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

Created new Ionic project from Ionic-CLI using following command
ionic start helloworld --type ionic1
Then I copied all files inside /helloworld/www/lib/ionic/ to my project /lib/ionic/

mhartington · 2017-11-01T16:29:34Z

It's there

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

stripathix · 2017-11-01T16:31:44Z

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

stripathix · 2017-11-01T17:07:23Z

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:

But if I use ionic.css then it works perfectly :-)

You can easily reproduce this issue in default Ionic project also If in index.html you use ionic.min.css instead of ionic.css

mhartington · 2017-11-01T17:38:41Z

Ahh, alright, I know whats up there.

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

mobidev111 · 2017-11-01T18:03:02Z

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

stripathix · 2017-11-02T07:21:15Z

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 · 2017-11-02T08:11:02Z

Few more issues regarding the iPhoneX notch with different orientation.

SideMenu template with orientation Landscape not right

**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);
      }

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

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

mhartington · 2017-11-02T13:29:03Z

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 · 2017-11-02T14:24:01Z

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

Not sure what's going there :-( .

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

mhartington · 2017-11-02T14:34:00Z

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 · 2017-11-02T15:23:56Z

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

mobidev111 · 2017-11-02T16:40:01Z

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

mhartington · 2017-11-02T16:54:09Z

npm i ionic-angular@legacy

seatechdev · 2017-11-05T17:27:36Z

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 · 2017-11-06T11:00:55Z

For Ionic1 footer is not right with iPhoneX:

stripathix · 2017-11-06T11:01:40Z

Is it possible to disable Landscape mode for iPhoneX only?

josandretto · 2017-11-06T13:14:55Z

@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 · 2017-11-06T14:44:15Z

@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 · 2017-11-06T15:22:14Z

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

mhartington · 2017-11-06T15:33:28Z

Orientation can be locked via the config.xml

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

josandretto · 2017-11-06T15:39:10Z

@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 · 2017-11-06T16:51:21Z

@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 · 2017-11-06T18:38:23Z

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!

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

mlynch mentioned this issue Sep 29, 2017

Is Ionic v1 still maintained? #320

Open

mhartington closed this as completed Oct 25, 2017

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

Rounded edges of the iPhone X on ionic #317

Rounded edges of the iPhone X on ionic #317

Comments

kas84 commented Sep 16, 2017

revie commented Sep 19, 2017

kensodemann commented Sep 23, 2017

kas84 commented Sep 27, 2017

mlynch commented Sep 29, 2017

mlynch commented Sep 29, 2017 • edited Loading

Note

stripathix commented Oct 5, 2017 • edited Loading

ruairisdad commented Oct 17, 2017 • edited Loading

mark-veenstra commented Oct 17, 2017

smuaq commented Oct 24, 2017

mlynch commented Oct 24, 2017

mhartington commented Oct 25, 2017 • edited Loading

mobidev111 commented Oct 25, 2017

mhartington commented Oct 25, 2017 • edited Loading

kas84 commented Oct 26, 2017

m-vdv commented Oct 26, 2017

geshub commented Oct 29, 2017

josandretto commented Oct 30, 2017

mhartington commented Oct 30, 2017

stripathix commented Oct 31, 2017 • edited Loading

ruairisdad commented Oct 31, 2017

revie commented Oct 31, 2017

stripathix commented Oct 31, 2017

marioshtika commented Nov 1, 2017

mhartington commented Nov 1, 2017

stripathix commented Nov 1, 2017

stripathix commented Nov 1, 2017

stripathix commented Nov 1, 2017

mhartington commented Nov 1, 2017

stripathix commented Nov 1, 2017

stripathix commented Nov 1, 2017

mhartington commented Nov 1, 2017

stripathix commented Nov 1, 2017

stripathix commented Nov 1, 2017

mhartington commented Nov 1, 2017

stripathix commented Nov 1, 2017

stripathix commented Nov 1, 2017 • edited Loading

mhartington commented Nov 1, 2017

mobidev111 commented Nov 1, 2017

stripathix commented Nov 2, 2017

stripathix commented Nov 2, 2017

mhartington commented Nov 2, 2017 • edited Loading

stripathix commented Nov 2, 2017

mhartington commented Nov 2, 2017

mhartington commented Nov 2, 2017

mobidev111 commented Nov 2, 2017

mhartington commented Nov 2, 2017

seatechdev commented Nov 5, 2017

stripathix commented Nov 6, 2017

stripathix commented Nov 6, 2017

josandretto commented Nov 6, 2017 • edited Loading

mlynch commented Nov 6, 2017

stripathix commented Nov 6, 2017

mhartington commented Nov 6, 2017

josandretto commented Nov 6, 2017

stripathix commented Nov 6, 2017

mhartington commented Nov 6, 2017

mlynch commented Sep 29, 2017 •

edited

Loading

stripathix commented Oct 5, 2017 •

edited

Loading

ruairisdad commented Oct 17, 2017 •

edited

Loading

mhartington commented Oct 25, 2017 •

edited

Loading

mhartington commented Oct 25, 2017 •

edited

Loading

stripathix commented Oct 31, 2017 •

edited

Loading

stripathix commented Nov 1, 2017 •

edited

Loading

mhartington commented Nov 2, 2017 •

edited

Loading

josandretto commented Nov 6, 2017 •

edited

Loading