Skip to content
This repository was archived by the owner on May 4, 2022. It is now read-only.
This repository was archived by the owner on May 4, 2022. It is now read-only.

Rounded edges of the iPhone X on ionic #317

Closed
Closed
Rounded edges of the iPhone X on ionic#317
@kas84

Description

@kas84
kas84
opened on 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!

Activity

kas84
changed the title [-]rounded edges of the iPhone X on ionic[/-] [+]Rounded edges of the iPhone X on ionic[/+] on Sep 16, 2017
revie

revie commented on Sep 19, 2017

@revie
revie
on 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

kensodemann commented on Sep 23, 2017

@kensodemann
kensodemann
on Sep 23, 2017
Member

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

kas84 commented on Sep 27, 2017

@kas84
kas84
on Sep 27, 2017
Author

Thanks! That's awesome!!

mlynch
mentioned this on Sep 29, 2017
mlynch

mlynch commented on Sep 29, 2017

@mlynch
mlynch
on Sep 29, 2017
Contributor

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

mlynch

mlynch commented on Sep 29, 2017

@mlynch
mlynch
on Sep 29, 2017 · edited by mlynch
Contributor

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

stripathix commented on Oct 5, 2017

@stripathix
stripathix
on Oct 5, 2017 · edited by stripathix

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

ruairisdad commented on Oct 17, 2017

@ruairisdad
ruairisdad
on Oct 17, 2017 · edited by ruairisdad

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

mark-veenstra commented on Oct 17, 2017

@mark-veenstra
mark-veenstra
on Oct 17, 2017

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

smuaq

smuaq commented on Oct 24, 2017

@smuaq
smuaq
on Oct 24, 2017

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

mlynch

mlynch commented on Oct 24, 2017

@mlynch
mlynch
on Oct 24, 2017
Contributor

Yep, release incoming very soon (this week)

mhartington

mhartington commented on Oct 25, 2017

@mhartington
mhartington
on Oct 25, 2017 · edited by mhartington
Contributor

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
mhartington
closed this as completedon Oct 25, 2017
mobidev111

mobidev111 commented on Oct 25, 2017

@mobidev111
mobidev111
on Oct 25, 2017

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

30 remaining items

mhartington

mhartington commented on Nov 2, 2017

@mhartington
mhartington
on Nov 2, 2017
Contributor

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

mhartington commented on Nov 2, 2017

@mhartington
mhartington
on Nov 2, 2017
Contributor

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

mobidev111

mobidev111 commented on Nov 2, 2017

@mobidev111
mobidev111
on Nov 2, 2017

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

mhartington

mhartington commented on Nov 2, 2017

@mhartington
mhartington
on Nov 2, 2017
Contributor

npm i ionic-angular@legacy

seatechdev

seatechdev commented on Nov 5, 2017

@seatechdev
seatechdev
on 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

stripathix commented on Nov 6, 2017

@stripathix
stripathix
on 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

stripathix commented on Nov 6, 2017

@stripathix
stripathix
on Nov 6, 2017

Is it possible to disable Landscape mode for iPhoneX only?

josandretto

josandretto commented on Nov 6, 2017

@josandretto
josandretto
on Nov 6, 2017 · edited by josandretto

@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

mlynch commented on Nov 6, 2017

@mlynch
mlynch
on Nov 6, 2017
Contributor

@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

stripathix commented on Nov 6, 2017

@stripathix
stripathix
on Nov 6, 2017

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

mhartington

mhartington commented on Nov 6, 2017

@mhartington
mhartington
on Nov 6, 2017
Contributor

Orientation can be locked via the config.xml

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

josandretto

josandretto commented on Nov 6, 2017

@josandretto
josandretto
on 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

stripathix commented on Nov 6, 2017

@stripathix
stripathix
on 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

mhartington commented on Nov 6, 2017

@mhartington
mhartington
on Nov 6, 2017
Contributor

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
locked and limited conversation to collaborators on Nov 6, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @kas84@mlynch@revie@kensodemann@m-vdv

        Issue actions
          Rounded edges of the iPhone X on ionic · Issue #317 · ionic-team/ionic-v1