Ionic-framework: input bug on ios12

Created on 21 Sep 2018 · 11Comments · Source: ionic-team/ionic-framework

Bug Report

Ionic Info

✔ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)  : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 1.2.1, (and 21 other plugins)

System:

   Android SDK Tools : 25.2.3 (/Users/Story5/Library/Android/sdk)
   ios-deploy        : 2.0.0
   ios-sim           : 7.0.0
   NodeJS            : v8.12.0 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS High Sierra
   Xcode             : Xcode 10.0 Build version 10A255

Describe the Bug
On ios12, after click the input, the xcode show the error below.

API error: <_UIKBCompatInputView: 0x105d01cd0; frame = (0 0; 0 0); layer = > returned 0 width, assuming UIViewNoIntrinsicMetric

and otherwise, the click event on this page are confused.
When I click the login button, it call a forget button click event, click the choose server button then call a switch environment click event.

Related Code

        <div class="be_login_form" [style.top.%]="isShowingKeyboard?45:50">
            <div class="be_login_form_block">
                <ion-input [(ngModel)]="account.username" placeholder="手机号" class="be_login_input_username" clearInput=true clearOnEdit=false ></ion-input>
                <ion-input [(ngModel)]="account.password" type="password" placeholder="密码" class="be_login_input_password" clearInput=true clearOnEdit=false ></ion-input>
                <button class="be_login_button" (click)="clickLogin()">登 录</button>
                <div class="be_forget_button">
                    <span (click)="clickInputCusInfo()">{{cusinfo}}</span>
                    <span (click)="retrievePassword()">忘记密码</span>
                </div>
            </div>
        </div>

triage

Source

Story5

👍1

Most helpful comment

Experiencing the same issue on iOS 12 with Xcode 10.

Inspecting my app's HTML while running I get the follow bounding box for the root <html> element:

{"x":0,"y":0,"width":375,"height":667,"top":0,"right":375,"bottom":667,"left":0}

After selecting an input, with the keyboard visible AND once it has been dismissed:

{"x":0,"y":-90,"width":375,"height":667,"top":-90,"right":375,"bottom":577,"left":0}

So as @mwenko said the HTML is staying shifted (affecting where touch events will trigger) but visually everything goes back to where it was. Adding those extra config value to IonicModule did not work for me.

Edit: Upgrading from the deprecated ionic-plugin-key fixed my issue.

joshmcrae on 27 Sep 2018

👍2 🎉1

All 11 comments

Maybe this bug is related to https://github.com/ionic-team/ionic/issues/15689 ?

carstenbaumhoegger on 21 Sep 2018

Run into the same problem today with exact same environment. It seems like the problem is, that when the keyboard is shown, the content is pushed up to the top a bit. But when the keyboard is closed, it does not get down anymore. (The fun fact is that the content goes down _visually_, but when debuggen with code the elements are on the same place as when the keyboard is open)

This is the size of the whole page when no input has been clicked: (as it should be)
before_input_click

And this is the size after the input has been clicked:
after_input_click

Interesting to note: the whole <html>-tag shows now that it includes not the full height like in the second picture.

mwenko on 21 Sep 2018

@Story5

Using the following code in app.module.ts solved my problem:

Take note of the following lines:
scrollAssist: true, autoFocusAssist: true, scrollPadding: true

mwenko on 24 Sep 2018

Thanks for your answers, @mwenko .
Is there any reference link about the config of IonicModule in app.module.ts?
It's seem not work for me. And I don't understand how the 3 configures works in principle.

Story5 on 25 Sep 2018

Experiencing the same issue on iOS 12 with Xcode 10.

Inspecting my app's HTML while running I get the follow bounding box for the root <html> element:

{"x":0,"y":0,"width":375,"height":667,"top":0,"right":375,"bottom":667,"left":0}

After selecting an input, with the keyboard visible AND once it has been dismissed:

{"x":0,"y":-90,"width":375,"height":667,"top":-90,"right":375,"bottom":577,"left":0}

Edit: Upgrading from the deprecated ionic-plugin-key fixed my issue.

joshmcrae on 27 Sep 2018

👍2 🎉1

Edit: Upgrading from the deprecated ionic-plugin-key fixed my issue.

Thanks @joshmcrae that solved my problem too!

maxfloden on 27 Sep 2018

what do you mean upgrading from the deprecated plugin @joshmcrae ? i'm experiencing the same issue

i'm using <plugin name="ionic-plugin-keyboard" spec="^2.2.1" /> for my app

jamesparkes on 27 Sep 2018

what do you mean upgrading from the deprecated plugin @joshmcrae ? i'm experiencing the same issue

i'm using <plugin name="ionic-plugin-keyboard" spec="^2.2.1" /> for my app

@jamesparkes - scroll down at https://github.com/ionic-team/ionic-plugin-keyboard and you will find this:
👉 Deprecated! Please use cordova-plugin-ionic-keyboard 👈
See this comment for API changes needed to move to new plugin: https://github.com/ionic-team/ionic-plugin-keyboard/issues/305#issuecomment-364198332

maxfloden on 27 Sep 2018

thanks @maxfloden upgrading to the new plugin fixed this for me too!

jamesparkes on 27 Sep 2018

👍1

This should be fixed, correct?

paulstelzer on 4 Dec 2018

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.