Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

input bug on ios12 #15699

Closed
Story5 opened this issue Sep 21, 2018 · 11 comments
Closed

input bug on ios12 #15699

Story5 opened this issue Sep 21, 2018 · 11 comments
Labels
triage

Comments

@Story5
Copy link

Story5 commented Sep 21, 2018 •
edited
Loading

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 = <CALayer: 0x280486a40>> 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>
@ionitron-bot ionitron-bot bot added the triage label Sep 21, 2018
@carstenbaumhoegger
Copy link
Contributor

Maybe this bug is related to #15689 ?

@mwenko
Copy link

mwenko commented Sep 21, 2018 •
edited
Loading

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
Copy link

mwenko commented Sep 24, 2018 •
edited
Loading

@Story5

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

image

Take note of the following lines:

         scrollAssist: true,
         autoFocusAssist: true,
         scrollPadding: true

@Story5
Copy link
Author

Story5 commented Sep 25, 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.

@joshmcrae
Copy link

joshmcrae commented Sep 27, 2018 •
edited
Loading

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.

@maxfloden
Copy link

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

Thanks @joshmcrae that solved my problem too!

@jamesparkes
Copy link

jamesparkes commented Sep 27, 2018 •
edited
Loading

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

@maxfloden
Copy link

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: ionic-team/ionic-plugin-keyboard#305 (comment)

@jamesparkes
Copy link

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

@paulstelzer
Copy link
Contributor

This should be fixed, correct?

@ionitron-bot
Copy link

ionitron-bot bot commented Jan 3, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Jan 3, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@jamesparkes @carstenbaumhoegger @maxfloden @joshmcrae @Story5 @paulstelzer @mwenko