Ionic-framework: CSS changes for iOS11 cause too much padding on iPhone < X: calc(x + y)

[SebastianSchirmer]

Ionic version:
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ...
[x] bug report
[ ] feature request

Current behavior:
The newly introduced CSS changes with ionic-angular 3.7.0 (constant(safe-area-inset-xxx)) cause too much top and bottom padding when running app on iPhone version < X and iOS 11.

Expected behavior:
Padding should be right, i.e. 20px top padding to cater for status bar.

Steps to reproduce:
Set meta tag viewport-fit=cover in index.html: <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Use <plugin name="cordova-plugin-ionic-webview" spec="1.1.8"/>

Use <plugin name="cordova-plugin-statusbar" spec="https://github.com/apache/cordova-plugin-statusbar.git"/>

Use "ionic-angular": "3.7.0"

Related code:

The newly introduced CSS rule, e.g. padding-top: calc(20px + constant(safe-area-inset-top)); on the .scroll-content element result in a padding-top of 40px which is 20px + 20px and therefore wrong. The rule should rather be padding-top: constant(safe-area-inset-top); omitting the calc function. In the future, the max() function will be of help but today it's not available yet. calc(20px + constant...) is - in my opinion - not a good way to go forward.

Other information:
see a screenshot from Safari Web Inspector here: https://www.dropbox.com/s/3rx56qqslpucwxb/IMG_9841.PNG?dl=0

Ionic info:

$ ionic info

cli packages: (/Users/schirmeur/.config/yarn/global/node_modules)

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 6.5.0

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.2.3 ios 4.5.1
    Ionic Framework    : ionic-angular 3.7.0

System:

    Android SDK Tools : 25.2.5
    ios-deploy        : 1.9.2
    ios-sim           : 6.0.0
    Node              : v6.9.2
    npm               : 3.10.9
    OS                : macOS Sierra
    Xcode             : Xcode 9.0 Build version 9A235

Misc:

    backend : legacy

[uniphonic]

I can confirm seeing this issue as well, though in my app the padding shows up under the main navbar.

[uniphonic]

@SebastianSchirmer This sounds like the same issue as reported in #13001 , but it sounds like you may have a fix? Is it working well for you, and are you thinking to make a pull request?

[kensodemann]

@mhartington - I believe this an #12958 are either the same or related. I also think I have finally been able to create a test case to recreate it, but will have to work on that more tomorrow.

Update: Ignore that. Installed the cordova-plugin-ionic-webview (WKWebView) plug-in and the issue went away. I will comment as such on #12958.

Also, after looking at the picture here again, I think these are probably not related.

[SebastianSchirmer]

@mhartington I am not sure why you set padding-top: calc(20px + constant(safe-area-inset-top)); as an example for top padding, adding up 20px and the safe inset. Wouldn't the safe inset be sufficient, resulting in padding-top: 20px; padding-top: constant(safe-area-inset-top); ? I don't see the need of adding addtl. 20px. Also changing the device orientation shouldn't be an issue, but maybe I am missing something important here...

[mhartington]

I've been wrong before, this time is no different 😄
Yeah, it looks a lot better without the extra 20px

I'll update the styles.

[SebastianSchirmer]

Awesome!

I've investigated a bit more and I'm quite sure now that calc(20px + constant...) is not right.

Thanks in advance for updating the styles.

[uniphonic]

@mhartington @SebastianSchirmer Excellent! Thanks! I'd love to know when there is a pull request I can grab.

[cosnofski]

Using the WKWebView engine fixed this for me. It also fixed an issue where the top most and bottom most elements would be hidden for a moment during a screen bounce

[uniphonic]

When I install WKWebView it fixes the issue for me, but unfortunately WKWebView is not compatible with all of the web services my app uses at the moment, so I had to uninstall it. I'm still waiting for the fix. @mhartington is there somewhere I can grab your updated code? Thanks!

[kensodemann]

@uniphonic - RE the web services, did you have a look at out WKWebView guide? Specifically the section on CORs? https://ionicframework.com/docs/wkwebview/#cors

[saschwarz]

@kensodemann - unfortunately, in my case there is an open issue with Auth0 and WKWebView that keeps me from using it: https://github.com/auth0/auth0-cordova/issues/42

[mhartington]

For those who were having issues with the padding top on ion-content,

npm i [email protected]

This has the fix for now.

@saschwarz as for the WKWebview/Auth0 issues, I think we should continue the conversation on their issue track, as this is a bit off topic for here 👍

[SebastianSchirmer]

@mhartington I've installed [email protected] as suggested and tested with this version, looks better now but not perfect yet.

It seems you are wrongly using padding-bottom: calc(constant(safe-area-inset-top) + 4px);
for selector .ios ion-footer .toolbar:last-child. In other words, you are using ...top but instead you should be using ...bottom here.

I tried to find the corresponding place in the scss files and I strongly reckon it's in ionic-angular/platform/cordova.scss at the very bottom, line 94:

ion-footer .toolbar:last-child {
    @include padding(null, null, calc(constant(safe-area-inset-top) + #{$toolbar-padding}), null);
    height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
    min-height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
  }

Here, constant(safe-area-inset-top) is being used but this should rather be constant(safe-area-inset-bottom). I guess at least...

Therefore I kindly ask you to reopen this issue :-)

[mhartington]

[CooleyGit]

Im seeing the same issue on ion-title in header after updating to 3.7.1.
The + 4px seem to be off on all iPhone screen.

[mhartington]

@CooleyGit would you be able to get me a screenshot?

[mhartington]

Just pushed a fix for this on my test branch. Will publish a nightly soon.

[SebastianSchirmer]

thx, will test then immediately

[davibertolini]

We’ve updated the plugins and followed Ionic’s iOS 11 checklist: https://blog.ionic.io/ios-11-checklist/amp/

Still, on all iOS devices with iOS 11 (after building with latest Xcode), our app has a padding on top and bottom: https://drive.google.com/open?id=0BzmPOfbSkbmvd0FYYmJoaWZnLUk

[SebastianSchirmer]

For us, using ionic-angular version 3.7.1-201710101557 works perfectly

[d3vtoolsmith]

Same with latest [email protected] - it's beautiful!

[mparpaillon]

This does not work on [email protected] when using tabsLayout="icon-hide"

[mhartington]

@mparpaillon Hmm, it looks fine for me

[kjeacle]

I get a gap under the tab bar when tabs are on top i.e. safe area appears to be added under tab bar even when tabs are at top of screen.

[mhartington]

The tabs-top layout isn't really recommended right now, as it very problematic with our current layout setup. I suggest yo leave it as the default

[mparpaillon]

@mhartington My app is indeed using tabs on top. Didn't know it was not recommended. How are we supposed to know that ?
Anyway, I need this tab placement so I modified the CSS to make it work. Hope it will be fixed soon
Thanks

[nwercto]

@mparpaillon My app is also using tabs on top and I got the same problem. Spent the last days to check the CSS but I could not find what the problem is (problem did not appear in browser).
Would you please share the changes you made on the CSS side?

[kjeacle]

@nwercto try adding this for iPhone X:

.tabbar { padding-bottom: 0px !important; }

[NeoLSN]

@mhartington Do you consider let the ion-content contain some bottom padding in default?

[theHellyar]

@nwercto just incase you didn't fix it yet...

.tabs-ios[tabsPlacement=top] .tabbar {
    padding-bottom: 0px;
}

[nwercto]

@kjeacle @theHellyar Thank your for your suggestion.
The change makes it a little better.

But I still get something weird with my tabs bar on iOS (only in iOS / no problem in browser).
When I launch the app, I am on TAB 1. Display is normal (no space added).
When I select TAB 2, it adds 20px between tab bar and page.
I select a new page (outside from the tabs) and then I go back to TAB 2. Display is normal, the previous 20px disappeared.
Do you know why?

Note that I am currently using UIWebview on this project.
As suggested in this thread, I tried WKWebview (with proxy for CORS) and I can confirm WKWebview made the problem disappeared.
Unfortunately, proxy can't be used in production mode and changes on the server side won't be made before months.
Still investigating for a quick workaround with UIWebview.

[jd048]

Hello
i am facing issue when set on iphoneX
<ion-tabs tabsPlacement="top"> <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab> <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab> <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab> </ion-tabs>

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.