White bar at bottom of my WEB-APP

[ghost]

Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [] 2.x [x] 3.x [ ] 4.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request

Current behavior: After adding viewport-fit=cover to the meta tags the white bar moved from the status bar to the bottom.

Expected behavior: No white bar at the bottom

Steps to reproduce: Create an ionic app and use it as a webapp with safari.

Related code:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Other information: I only found fixes for nativ app using cordova or ionic, but I only use the framework as a webapp and I could not find a fix for that.

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub or https://stackblitz.com that demonstrates the issue you are having?

I tried copy/pasting your related code into the index.html into one of my sample test applications and saw no negative effect in Safari or Chrome.

Thanks for using Ionic!

[ghost]

Thanks for your answer.

I created a fresh Ionic App using ionic start myApp sidemenu. Then I added the related code to the index.html and deployed it to a webserver.

After adding the webapp to the HomeScreen of my iPhone (Safari WebApp) it clearly shows a white bar at the bottom of the page.

Additionally changed statusbarPadding from false to true and back, but the white bar is always there.

I forgot to say: This problem exists since I upgraded to iOS 11

[selected-pixel-jameson]

I would say this is directly related to this https://stackoverflow.com/questions/46232812/cordova-app-not-displaying-correctly-on-iphone-x-simulator/46232813#46232813. This problem will occur on all phones besides the iPhone X if you apply viewport-fit=cover". There is a pull request for this https://github.com/apache/cordova-plugin-statusbar/pull/85.

[ghost]

I'm not using an iPhone X.

Additionally I'm not using Cordova, I only use this as a WebApp (Safari) without anything native..

More Info: Sometimes I can 'scroll' the white bar down a bit and it goes up again slowly.. Not sure if this helps...

[jacobslusser]

I'm experiencing the same issue. When I add viewport-fit=cover to the viewport meta tag, it hides the top "notch", but the bottom one still scrolls in and out of view.

EDIT: Issues #12011 and #12020 are also tracking this issue.

[kensodemann]

Hello all! Thank you for all the feedback! Several people here are currently looking into several iOS11 and iPhone X related issues. I will be sure to update this issue when we have more information.

Thank you for using Ionic

[wbmPeterScarborough]

Thanks Apple!

/s

Guess I'll develop leaving the extra top padding until a fix is developed for Apple inexplicably changing their crap

[kensodemann]

Hello all! Could you make sure you have the items described in the following blog post applied to your applications and let me know if you are still having this issue?

http://blog.ionic.io/ios-11-checklist/

[bruceli]

@kensodemann Thanks for the link. We were facing a similar issue, but the white bar was on top of the screen. After adding viewport-fit=cover the problem was fixed.

[ghost]

Still doesn't work for me.. I'm not using cordova and all these cordova patches don't work for WebApps.

[jacobslusser]

I ended up working around the issue by adding the viewport-fit=cover as previously indicated AND by adjusting the bottom of my main div (which is #app) with the following CSS:

#app {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    bottom: calc(0px - constant(safe-area-inset-top));
}

This is article was helpful in discovering the solution: https://medium.com/@pixelthing/welcome-to-notch-chat-a2206a7c3254

It's a hack to be sure and may not work for everyone.

I discovered my body tag was more or less spanning the full height of the window when the viewport tag was modified appropriately (I'm using height: 100% on my html and body tags). But in my app there is a main div (#app) which also takes up 100% height and has the actual content, does the scrolling, etc. It was this div that would not go to 100% no matter what I tried until I used the calc above.

I also found that the safe-area-inset-bottom constant evaluated to zero, as did the ones on the sides. I guess since the viewport tag fixes the safe area on top, that is the only one that resolves to an actual value. So the final CSS uses the safe-area-inset-top and extends my main div bottom by that amount.

YMMV.

[ghost]

Where did you place this div? I don't have that.. I'm using the standard ionic side menu theme..

[TillaTheHun0]

I believe this is addressed in https://github.com/apache/cordova-plugin-statusbar/pull/87. That PR has been merged, but not released by Apache yet. Until then, you can remove the plugin and then install the plugin directly from the repo to get the fix in your project: cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git.

Also remember to add viewport-fit=cover to your meta tag in index.html

[TillaTheHun0]

@kensodemann I've tested the above PR, https://github.com/apache/cordova-plugin-statusbar/pull/87, on an Ionic 1 1.3.1 project on Iphone 7 running iOS 11 and all seems to be working as expected.

[jacobslusser]

The short answer to the question from @modsfabio is that I'm not using standard Ionic and I'm not using Cordova either. Our company has a custom versions of both technologies. Thus I needed a solution that works on plain HTML in a plain WKWebView. As I said, YMMV.

[kensodemann]

I want to make sure I understand where we are at with this, so here is an attempt at a summary:

• this is only an issue now for people running their apps as web-apps / PWAs, and thus are not using any cordova plugins
• this is only an issue on iOS 11 devices
• for someone running the app natively, the combination of things blogged about, including the plugin changes worked

Does that sound right? I want to make sure we are working on the correct issues here as we try to solve this.

[ghost]

Yes, exaclty!

[kensodemann]

I tried duplicating this using ionic-angular@3.7.1 and the tabs starter on several different iOS 11 devices and was unable to reproduce this issue. Could you please post a sample application via GitHub that duplicates this issue? Also, some screenshots showing the issue may prove very helpful.

[mhartington]

Hi there! I just installed the latest nightly , ionic-angular@3.7.1-201710032000 in a test app, and all appears to work well for me.

ionic start myApp tabs

cd myApp

npm i ionic-angular@3.7.1-201710032000

npm run build --prod

cd www && httpster

From there, I open the iPhoneX simulator, navigate to localhost:3333 and get this.

Additionally, here is the app on an iphon7 with ios 11 as well.

So I think we can call this fixed?

[ghost]

You have to save the App to your homescreen to make it work as a WebApp without the addressline and stuff.

I installed ionic-angular@3.7.1-201710032000 and tested it using the sidemenu example. Here are my results:

Everything at default: (looks ok, but I want the app behind the statusbar)

I changed <meta name="apple-mobile-web-app-status-bar-style" content="black"> to <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

It looks like this now (doesn't matter if config 'statusbarPadding' is true or false): (the padding does not apply correctly, the sidemenu looks broken and on the bottom is a white bar. You can't see the bar here in github because it's white, just open the screenshot on a black background.

[kensodemann]

I can verify that using a test app I have. Both cases using nightly build with only diff being value of meta name="apple-mobile-web-app-status-bar-style"

[mhartington]

I'm wondering if this is iOS bug 🤔

In a known, ionic app, or a single index.html, the black-translucent seems to be cutting the size of things....

here both html and body tags are set to fill the entire screen

[qiluo]

Same issue here, I'm using ionic and I've just upgraded to ionic 3.7.1, cordova-ios 4.5.2, as well as updated cordova-plugin-statusbar to latest, added viewport-fit=cover, there's always a white bottom bar in my app.

I've noticed body didn't fill entire page with web inspector as well

[mhartington]

@qiluo please provide more information.

• Is this in a cordova app?
• ionic info output?

[qiluo]

hi, @mhartington

ionic info threw error on my side, maybe it's another bug

TypeError: Cannot read property 'toLowerCase' of undefined
    at ary.sort (/usr/local/lib/node_modules/ionic/dist/commands/info.js:24:66)
    at Array.sort (native)
    at splitInfo (/usr/local/lib/node_modules/ionic/dist/commands/info.js:24:18)
....

To your question

1. Yes it's a Cordova app
2. I'm on Ionic 3.7.1, cordova-ios 4.5.2, ionic-cli 3.13.0, OSX 10.12.6, Xcode 9, the testing device is iPhone 7P running iOS 11.0.3

[mhartington]

k, @qiluo can you please provide a sample app to test against?

[qiluo]

@mhartington, sorry, I've tried to provide a simple sample to reproduce the issue, not succeeded. I also tried latest master branch of ionic, the issue still exists in my real app.

In my app, I got a tabbed layout, there's white bar on the bottom, and I got full screen modal page, there's white bar on the bottom. I've tried several potential solution, the white bar still on my every screen.

I'm thinking about if there's any dirty code not cleaned while I doing upgrade. I would keep looking into the issue, any update will let you know, thanks.

[jlf123]

I have the same issue, any update?

[lovelyelfpop]

@qiluo I have the same issue

[qiluo]

@lovelyelfpop, I did a complete clean (removed node_module dir, rm cordova-ios and added again) and make sure ionic (3.8.0), ionic-cli (3.15.2), cordova-ios (4.5.3), cordova-cli (7.1.0) on latest version, the problem's just gone :)

[dimitri320]

I've done all this, and still have while space between my ion-content and the ion-header sections.

[damian-tarnawsky]

I think i have this problem worked out. I've blogged about it here: https://medium.com/@damian_t/fixing-ios-11-web-apps-apple-mobile-web-app-capable-e5ed1a8c66e0

The problem is using viewport-fit=cover if the web app was added to the home screen. The solution is to conditionally remove the viewport-fit=cover property by adding this to your index.html:

if (window.navigator.standalone) {
            document.querySelector('meta[name=viewport]').setAttribute('content', 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no');

This isn't optimal on an iPhone X but it's a lot better than an unusable UI.

[bkaskes]

I encountered a similar issue building a web app with header bar and footer icon navigation bar. Maybe this can help you:

In the <head>:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0">

CSS of html and body, this trick removed the white bar at the bottom:

html, body {
    max-width: 100%;
    overflow-x: hidden;

    min-height: 100%;
    min-height: calc(100% + constant(safe-area-inset-top));
    min-height: calc(100% + env(safe-area-inset-top));
}

Note: In my option it seems like a bug not having the full 100% height when using viewport-fit=cover. So, maybe it will be different in future iOS safari versions

CSS of top header:

.MobileHeader {
    padding-top: 0;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);

    // ...
}

CSS of bottom navbar (fixed at bottom using Bulma css framework navbar is-fixed-bottom classes):

.MobileNavigation {
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    // ...
}

Tested on iPhone X and iPhone 6s (iOS 11.4.1)

[spacesuitdiver]

Be sure to test your solutions against early iOS versions (<11.2), there seems to be some inconsistencies across these versions. I am running into something similar with the maps plugin (https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2459) and trying to figure out the route to take.

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/250