Ionic-framework: Scroll content bounce to same position when keyboard active on iOS

[itsvee]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When input focus, screen will slide up to prevent the keyboard from overlapping input (left image) and will bounce screen to same position itself (center image). If type text with keyboard, screen will slide up to prevent the keyboard from overlapping input again (right image). I found it in iOS 10.3

Expected behavior:
When input focus, screen will slide up to prevent the keyboard from overlapping input that focus and hold until user touch other space or keyboard hide, screen will slide down to same position.

Related code:

I have class no-scroll to disable scroll screen and set Keyboard.disableScroll(false);

<ion-content padding class="no-scroll" id="login-page">
    <div class="logo">
        <img src="./assets/images/logo.png" />
    </div>
    <div class="form">
        <ion-item>
            <ion-input type="email" placeholder="Email" [(ngModel)]="emailValue"></ion-input>
        </ion-item>
        <button class="submit-btn" ion-button block (tap)="signIn()">Request Password</button>
        <p class="caption">An one time password will be sent to your email</p>
    </div>
</ion-content>

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.4.0
Xcode version: Xcode 8.3 Build version 8E162

[jgw96]

Hello, thanks for using Ionic! What are the reasons for you disabling scroll? Does this work if you do not disable scrolling? Also, would you mind sharing what your no-scroll css looks like?

[itsvee]

I disabled scroll in some page because content in page don't overflow (such as Login page), I don't want to user scroll page while content has in screen only. I put class no-scroll in ion-centent and write code in app.scss like

.scroll-content {
    padding-bottom: 0 !important;
}

But this problem was found other page too. I have a page that uses input form but this page don't add no-scroll in ion-content. When focus input and keyboard was show, I found that problem again.

[michaelyuen]

Does this occur in Ionic 2.2.0, or previous versions? In my app, I recently introduced some input scrolling issues from upgrading.

[itsvee]

@michaelyuen This problem has in Ionic 2.3.0. In the previous version haven't this problem but when I updated to 2.3.0 has it in my app.

[jgw96]

Hello. After further review of this issue I can confirm that this was caused by a regression in scroll events in 2.3.0. This issue has been fixed and will be in the next release. Sorry for the hassle caused by this bug!

[ScreamZ]

@jgw96 same issue with 3.0.0 seems

[larssn]

Also 3.0.1

[jmrobles]

@jgw96 any workaround? thanks

[josh-m-sharpe]

I opened a new issue w/ a repo demoing this problem on v3. See https://github.com/driftyco/ionic/issues/11201

[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.