Ionic-framework: ionic4 ion-footer can't display in ios10.3.1

[yanghaomeng]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

        "@angular/common": "~6.1.1",
        "@angular/core": "~6.1.1",
        "@angular/forms": "~6.1.1",
        "@angular/http": "~6.1.1",
        "@angular/platform-browser": "~6.1.1",
        "@angular/platform-browser-dynamic": "~6.1.1",
        "@angular/router": "~6.1.1",
        "@ionic-native/app-version": "5.0.0-beta.21",
        "@ionic-native/browser-tab": "5.0.0-beta.21",
        "@ionic-native/camera": "5.0.0-beta.21",
        "@ionic-native/code-push": "5.0.0-beta.21",
        "@ionic-native/core": "5.0.0-beta.21",
        "@ionic-native/device": "5.0.0-beta.21",
        "@ionic-native/diagnostic": "5.0.0-beta.21",
        "@ionic-native/file-transfer": "5.0.0-beta.21",
        "@ionic-native/in-app-browser": "5.0.0-beta.21",
        "@ionic-native/keyboard": "5.0.0-beta.21",
        "@ionic-native/screen-orientation": "5.0.0-beta.21",
        "@ionic-native/social-sharing": "5.0.0-beta.21",
        "@ionic-native/splash-screen": "5.0.0-beta.21",
        "@ionic-native/status-bar": "5.0.0-beta.21",
        "@ionic/angular": "4.0.0-beta.13",
        "@ionic/storage": "^2.2.0",

Describe the Bug
ion-footer can't display in ios10.3.1, others display normal.

Steps to Reproduce
Steps to reproduce the behavior:

1. run ios10.3.1
2. ion-footer can't work

[dylanvdmerwe]

Please can you provide some code in order for us to reproduce this.

[bryce13950]

Is this still an issue with the current beta?

[ermamud]

I can confirm this still an issue with the latest ionic 4 version 4.0.0-rc.0.
I have an APP in PROD environment right now with some clients complaining about this since I have my login form in a footer, all of those having iOS 10.3, can't see the footer, so they can't log in. If you like to see app working, please install the app called Megaconecta (https://itunes.apple.com/us/app/megaconecta/id1000791688?mt=8)

as per code example, it's just any page with content and footer. This is my current login page:

<ion-header></ion-header>

<ion-content padding>
    <ion-grid>
        <ion-row>
            <ion-col size="12">
                <h1 class="form-title font-30">
                    <ion-icon name="md-arrow-back" color="dark" routerLink="/" routerDirection="back"></ion-icon>
                </h1>
                <h1 class="form-title font-30">
                    <ion-text color="secondary">
                        <span>Welcome</span>
                    </ion-text>
                </h1>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

<ion-footer>
    <form (ngSubmit)="submitForm()">
        <ion-grid padding>
            <ion-row>
                <ion-col size="12">
                    <ion-item>
                        <ion-icon slot="start" name="person" color="secondary"></ion-icon>
                        <ion-input type="tel" name="username" [(ngModel)]="username" required placeholder="Phone"></ion-input>
                    </ion-item>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col size="12" class="mb-20">
                    <ion-item>
                        <ion-icon slot="start" name="unlock" color="secondary"></ion-icon>
                        <ion-input [type]="type" name="password" [(ngModel)]="password" required placeholder="Password"></ion-input>
                        <ion-icon slot="end" [name]="icon" color="medium" (click)="changeInputType()"></ion-icon>
                    </ion-item>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col size="12">
                    <div class="mb-20">
                        <ion-button type="submit" class="no-radius" expand="block" color="secondary">
                            LOG IN
                        </ion-button>
                        <ion-button type="button" class="no-radius" fill="clear" expand="block" color="secondary" routerLink="/forgot-password" routerDirection="forward">
                            Forgot your password?
                        </ion-button>
                    </div>
                </ion-col>
            </ion-row>
        </ion-grid>
    </form>
</ion-footer>

Please any help as soon as possible, would be greatly appreciated.

Regards,
Ernesto

[bryce13950]

I think this has to do with the calculated height. I noticed that a lot of wrapper elements were given heights of 568px when they had height 100% set on them, even though they were in a container that had a header, which should have given it a height somewhere around 520px. This then causes the footer to be pushed down just below the bottom of the screen. In my case I had a login form on the only page where I also had a footer. Activating any element on this page would then cause a manual recalculation of the height, and the footer would then appear for as long as the page was open.

[ermamud]

@bryce13950 what do you mean by activating any element? Can you show me some sample code of your solution?
Thank you

[bryce13950]

I mean that if you have an input element, and then click on that input, the screen will resize the content, and the footer will start showing. Not a solution, but probably a hint as to what is going on.

[charlesRms]

Same problem here with iOS 10.3.3 running on an iPhone 5.

It doesn't seem to be a height problem. I've tested these different configurations:

• iPhone 5S & iOS 11.4 -> no problem
• iPhone 6S & iOS 11.4 -> no problem
• iPhone 5 & iOS 10.3.3 -> the footer doesn't display
• iPhone 6S & iOS 10.3.1 -> the footer doesn't display

looks like the ion-footer component is not compatible with iOS 10.

ionic info

Ionic:

   ionic (Ionic CLI)             : 4.7.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.1
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.13
   @capacitor/core           : 1.0.0-beta.13

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 15 other plugins)

System:

   ios-deploy : 2.0.0
   NodeJS     : v10.3.0 (/usr/local/Cellar/node/10.3.0/bin/node)
   npm        : 6.1.0
   OS         : macOS Mojave
   Xcode      : Xcode 9.4.1 Build version 9F2000

[charlesRms]

solved my problem by changing css of the component inside my footer :

page.html

[...]
<ion-footer class="spaceFooter">
    <custom-component></custom-component>
</ion-footer>

custom-component.scss

    position : fixed;
    width :100%;
    bottom:0

global.scss

.spaceFooter{
    margin-top: 53px;
}

After that, I had a problem with every pages that had a bigger height than the screen. it was impossible to scroll to the end of the page. I had to create a component that add a 100px div if the device is ios10 and insert it before every tag.

now it's working both in ios (10 and 11) and android, but this is far from optimal.

Looks like there is a compatibility problem with ionic 4 and ios 10...

Hope it will be fixed

[epicazo]

Do we have any news on the subject?

For me it's not only the footer that can't be displayed but I can't scroll to the end of my menu, fab buttons positioned at the bottom of the page are out of screen, and my tabs don't show up aswell...

I tested it on a physical iPhone 5c running ios 10.3.3 and with the Xcode simulator an iPhone 5s on 10.3.1

[supperdsj]

same issure in iphone7/iphone7 plus with ios10

[diogomachado]

I'm have the same problem in ios 10, iPhone 6s, when the app show keyboard, the footer component not stay in bottom position

[amosbaby]

same issues in iOS 10.3.3 , I solved this by adding display:flex to ion-content. you can try it

[alyleite]

same issues in iOS 10.3.3 , I solved this by adding display:flex to ion-content. you can try it

@amosbaby Thank you. It worked here

[ermamud]

@amosbaby Thank you, your solution worked for me as well. But later I noticed there is an issue with loading spinner. Are you having the same issue?

[royanon]

Test on ionic 4.7.4 same problem in ios 10.3.1

[liamdebeasi]

Thanks for the issue! We recently released Ionic Framework v5 which brings a lot of exciting new features to the framework. In keeping with how iOS and Android are evolving, we have decided to drop support for Android 4.4 and iOS 10 with this latest release.

Because all our efforts are now focused on Ionic 5, Ionic 4 will only receive security patches moving forward. As a result I am going to close this issue.

Please see https://ionicframework.com/docs/intro/browser-support for an up to date list of supported browsers and platforms.

Additionally, please see https://ionicframework.com/blog/announcing-ionic-5/ for more info regarding Ionic Framework v5.

For anything regarding our supported platforms, please open a new issue.