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:

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

[liamdebeasi]

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

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

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

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

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

[aparajita]

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