ionic-framework: bug: input focus scroll does not work when viewport resizing is disabled

Bug Report

If KeyboardResize is set to false the keyboard overlaps the webview and does not resize it. The Content scrolling on input focus does not work in this case. As it is at the moment, I prefer the keyboard overlapping the webview and not resizing it because resizing feels clunky with jumped animations, tab-bar hiding bugs, etc.

Ionic version:

[x] 4.5.0

Current behavior: Content scrolling not available with KeyboardResize=false because webview is full-size

Expected behavior: If KeyboardResize is set to false, ion-content adds a keyboard-offset as padding-bottom so the content is bigger and content scrolling works.

Steps to reproduce: Add <preference name="KeyboardResize" value="false" /> to config.xml, create a page with a long form that uses more than half of the screen

Related code: Config.xml

<preference name="KeyboardResize" value="false" />

Page.html

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label position="stacked">
        <h3>Strasse, Nr.</h3>
      </ion-label>
      <ion-input type="text" name="street" inputmode="text" autocomplete="street-address" [(ngModel)]="address.street"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="stacked">
        <h3>PLZ</h3>
      </ion-label>
      <ion-input type="number" name="postalCode" pattern="[0-9]*" autocomplete="postal-code"
                 [(ngModel)]="address.postalCode"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="stacked">
        <h3>Ort</h3>
      </ion-label>
      <ion-input type="text" name="location" inputmode="text" autocomplete="locality" [(ngModel)]="address.location"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="stacked">
        <h3>Land</h3>
      </ion-label>
      <ion-input type="text" name="country" inputmode="text" autocomplete="country" [(ngModel)]="address.country"></ion-input>
    </ion-item>
  </ion-list>
</ion-content>

Other information:

Image from iOS

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms     : android 8.0.0, ios 5.0.1
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.4.1, (and 14 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/pascalgraf/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.1
   NodeJS            : v10.14.1 (/usr/local/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 6
Comments: 33 (12 by maintainers)

Commits related to this issue

fix(input, textarea): padding is now added to content so inputs scroll above keyboard (#25849) resolves #18532 — committed to ionic-team/ionic-framework by liamdebeasi 2 years ago

Most upvoted comments

I spent some time reworking Scroll Assist, and I fixed a few things that should significantly improve the user experience:

We now listen on either the input or its parent ion-item (if one exists) to initiate scroll assist. This resolved an issue where scroll assist would sometimes not work because users tapped ion-item. ion-item delegates focus to components like ion-input, so the keyboard would have still opened.
Updated scroll padding so that it works with ion-input. This is the fix that I mentioned in https://github.com/ionic-team/ionic-framework/issues/18532#issuecomment-729223021. This should resolve the thread’s issue where scroll assist was not working when viewport resizing was disabled.
We no longer wait for the keyboard to finish opening or for the webview to resize. We can do this because by the time we need to scroll the input into view, the scroll padding utility has already added the scroll height we need. This should improve the performance of scroll assist and make it seem more responsive.
We have improved our methods for determining how much we need to scroll the input by. If you are in Capacitor, we use the precise keyboard height given in the keyboardWillOpen event. If you are in a browser/PWA we use the approximate keyboard height given in the keyboardHeight config option. This should improve the reliability of the scrolling and it should resolve the issue where tapping inputs would always cause the content to scroll upwards.

Due to the significance of scroll assist, I have decided that these changes warrant more testing than usual. As a result, I am going to remove this issue from its existing milestone. My plan is to introduce this change as an experimental, opt-in feature in an upcoming feature release of Ionic Framework with the stable version shipping in Ionic Framework v6.

I am doing some additional testing, but I will provide a dev build here soon.

liamdebeasi on Nov 30, 2020

Yes, it was "resize": "none".

aparajita on Dec 9, 2020

Inputs are not scrolling into view. They move one pixel up I believe. This is with a different app than the input torture test app. I’ll be pushing it to github today and you can try yourself.

aparajita on Dec 9, 2020

Thanks @liamdebeasi, I’ll give it a shot and let you know what I find.

aparajita on Dec 3, 2020

Ok here is my first draft of the revised scroll assist. A few things to note about this dev build:

I am currently focusing on getting this working with webview resizing disabled. As a result, scroll assist will not work if webview resizing is enabled currently. I have plans to address this later. Here is how to disable webview resizing:

Capacitor capacitor.config.json

{
  "plugins": {
    "Keyboard": {
      "resize": "none"
    }
  }
}

Cordova config.xml

<preference name="KeyboardResize" value="false" />

When running this in a web browser or as a PWA, we do not know the exact height of the keyboard and need to guess. As a result, the amount we scroll by will be slightly more than needed. At the moment I do not have plans to address this since there is no fast way to get the exact keyboard height. I can use Visual Viewport, but that would mean not being able to scroll until the keyboard is fully open causing scroll assist to only start after a ~400ms delay.
When running the demo that @aparajita provided in a web browser, focusing input 6 then input 5 causes Safari to shift the entire view. I am still investigating why this is happening. This does not impact Capacitor/Cordova. Additionally, a similar behavior appears when using the older scroll assist.
I have not addressed the following issue from https://github.com/ionic-team/ionic-framework/issues/22513 yet:

On both Chrome and iOS, the content of an ion-textarea with left padding shifts left and then right when focused.

Here is the dev build for those who would like to test: 5.6.0-dev.202012021910.3a763f4

liamdebeasi on Dec 2, 2020