search

ionic-team / ionic-v1

The repo for Ionic 1.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
192 stars 187 forks source link

Rounded edges of the iPhone X on ionic #317

Closed kas84 closed 6 years ago

kas84 commented 6 years ago

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!

revie commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

Thanks! That's awesome!!

mlynch commented 6 years ago

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

mlynch commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

smuaq commented 6 years ago

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

mlynch commented 6 years ago

Yep, release incoming very soon (this week)

mhartington commented 6 years ago

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 commented 6 years ago

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

mhartington commented 6 years ago

@mobidev111 sure thing!

npm i ionic-angular@1.3.4-201710251625

UPDATE:

npm i ionic-angular@legacy
kas84 commented 6 years ago

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 commented 6 years ago

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

geshub commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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

https://github.com/ionic-team/ionic-v1/blob/fc404f98c346fa9b86609236568d575ce7c9f2f8/scss/_platform.scss#L21-L25

stripathix commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 6 years ago

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 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 6 years ago

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 commented 6 years ago

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

https://github.com/ionic-team/ionic-v1/blob/fc404f98c346fa9b86609236568d575ce7c9f2f8/scss/_platform.scss#L21-L25

stripathix commented 6 years ago

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 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

stripathix commented 6 years ago

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 commented 6 years ago

Ahh, alright, I know whats up there.

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

mobidev111 commented 6 years ago

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

stripathix commented 6 years ago

Hi @mhartington , I see a new version is released here: https://github.com/ionic-team/ionic-v1/commit/8f60b38375657cd3a87968ff785eb77768c9babb

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 6 years ago

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

2) 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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

mobidev111 commented 6 years ago

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

mhartington commented 6 years ago

npm i ionic-angular@legacy

seatechdev commented 6 years ago

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 commented 6 years ago

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 6 years ago

Is it possible to disable Landscape mode for iPhoneX only?

josandretto commented 6 years ago

@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'​);
}