Closed kas84 closed 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!
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.
Thanks! That's awesome!!
Just added the viewport-fit=cover
setting to viewport meta tags in app base, that's step 1
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:
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
Please also look into landscape mode in iPhone X (IonicV1). Side nav is not good either.
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
@mlynch When will there be the official update on v1?
Coming soon I guess: https://twitter.com/mhartington/status/920070473609830401
Yep, release incoming very soon (this week)
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
Great. Can you publish it to npm? At least v1.3.2 is available at the ionic-angular package
@mobidev111 sure thing!
npm i ionic-angular@1.3.4-201710251625
UPDATE:
npm i ionic-angular@legacy
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.
Please also update the changelog here: https://github.com/ionic-team/ionic-v1/blob/master/CHANGELOG.md
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 ?
@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.
Hmm, Im not able to replicate with a fresh project created from the CLI. And Im certain that the correct CSS is in place
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
@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
@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 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
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)
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.
@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
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.
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.
The css issues could be from your code. Again, I cannot replicate this locally in my tests.
@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.
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:
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
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?
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/
It's there
What I'm guessing is you have your own build pipe-line? Can you Please post a project example to debug.
Yes, I am having my own build code in nodeJS. I am working on posting sample project. Will push it soon.
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
Ahh, alright, I know whats up there.
Give me 15mins to finish lunch and I'll publish something
related when you're on this: there's a scss syntax error in _platform.scss (missing closing brackets), see #328
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
Few more issues regarding the iPhoneX notch with different orientation.
1) 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);
}
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
Just in case if need test application: https://github.com/stripathix/iPhoneX-testing-app
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.
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...
I think you might have something wonky in the setup.
ionic cordova plugin add cordova-plugin-ionic-webview
is working fine on my end.
bower install ionic-team/ionic-bower#1.3.5
should fix the css padding issue.
please publish this version to npm as well - sorry for bugging..
npm i ionic-angular@legacy
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?
For Ionic1 footer is not right with iPhoneX:
Is it possible to disable Landscape mode for iPhoneX only?
@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');
}
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!