bug: scroll assist is not working on PWA with latest version of Ionic 5.1.1

[joeszewski]

Bug Report

Ionic version:
5.1.1

Current behavior:
I have a form with a list of inputs (create account form). When tapping through the inputs, the keyboard overlays and hides the input. I believe I first noticed this behavior since the introduction of Ionic 5.0.6 and e24060e.

My prod app is still running 5.0.5, and the scroll assist works great.

I updated to 5.1.1 to test it again, thinking that 7166a29 would have addressed it, but it's still not behaving properly for me.

Expected behavior:
When tapping through a list of inputs and the keyboard displays, the focused input should also remain visible.

Related code:
I'm using Ionic Angular 5.1.1, running as a PWA on iOS safari.
Here's an example of what the structure of my template looks like:

<form>
 <ion-item>
  <ion-label position="stacked">Example</ion-label>
  <ion-input type="text"></ion-input>
 </ion-item>

 <ion-item>
  <ion-label position="stacked">Example</ion-label>
  <ion-input type="text"></ion-input>
 </ion-item>

 <ion-item>
  <ion-label position="stacked">Example</ion-label>
  <ion-input type="text"></ion-input>
 </ion-item>

 <ion-item>
  <ion-label position="stacked">Example</ion-label>
  <ion-input type="text"></ion-input>
 </ion-item>

 <ion-item>
  <ion-label position="stacked">Example</ion-label>
  <ion-input type="text"></ion-input>
 </ion-item>

 <ion-item>
  <ion-label position="stacked">Example</ion-label>
  <ion-input type="text"></ion-input>
 </ion-item>

 <ion-item>
  <ion-label position="stacked">Example</ion-label>
  <ion-input type="text"></ion-input>
 </ion-item>

 <ion-item>
  <ion-label position="stacked">Example</ion-label>
  <ion-input type="text"></ion-input>
 </ion-item>

 <ion-item>
  <ion-label position="stacked">Example</ion-label>
  <ion-input type="text"></ion-input>
 </ion-item>

 <ion-button shape="round" expand="full">Create Account</ion-button>
</form>

Other information:
Notice that I'm not currently wrapping the ion-items in an ion-list, I'm not sure if that would have any impact.

Ionic info:

Ionic CLI : 5.2.3 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 5.1.1
@angular-devkit/build-angular : 0.900.7
@angular-devkit/schematics : 9.0.7
@angular/cli : 9.0.7
@ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 1.5.1
@capacitor/core : 1.1.1

Cordova:

Cordova CLI : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (0 plugins total)

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v10.16.3 (/usr/local/Cellar/node/9.6.1/bin/node)
npm : 6.9.0
OS : macOS Mojave

[liamdebeasi]

Thanks for the issue. What was the last version this was working on? I am trying this on Ionic Framework 5.0.5, and it is not working there either.

For Capacitor/Cordova apps scroll assist relies on the content being resized in order to scroll. This does not happen on PWAs, so it makes sense why it would not be working there. However, we have a --keyboard-offset variable that is supposed to be applied to the content to artificially add padding on the bottom so the content can scroll. That does not look like it is being added any more.

[joeszewski]

@liamdebeasi strange...the app I have deployed to prod is using Ionic 5.0.5, and the scroll assist is working as expected. All other code/packages are the same.

[liamdebeasi]

What version of iOS/device are you testing this on?

[joeszewski]

iPhone 11 Pro running iOS 13.4.1

[liamdebeasi]

Strange, I'm testing on an iPhone 11 running iOS 13.4.1. I'll keep investigating - thanks!

[rricamar]

Hi @liamdebeasi, after updating v5.1.1 I'm having the same problem, I would even say that scroll assist works randomly, is there any condition/Html attribute for having it work? 🤔 thanks!

[rricamar]

Here is a .zip with an example:

scroll-assits.zip

My ionic info:

Ionic:

   Ionic CLI                     : 5.4.16
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.901.7
   @angular-devkit/schematics    : 9.1.7
   @angular/cli                  : 9.1.7
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 24 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 1.0.0

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v12.16.1 (/Users/rricamar/.nvm/versions/node/v12.16.1/bin/node)
   npm        : 6.14.4
   OS         : macOS Catalina
   Xcode      : Xcode 11.5 Build version 11E608c

[rricamar]

I tried also v5.0.5 and it doesn't work. The input's Html is:

<ion-input
    type="password"
    formControlName="passwordConfirmation"
    (keydown.enter)="sendPassword()"
></ion-input>

To have scroll-assist working, do we need something more?
Thank you in advance 👍

[rricamar]

One last thing that I've forgotten to say: This is happening to me on my Native App (Cordova), I know that this issue is for PWA but I considered convenient putting this info here 😅 👍

[joeszewski]

@liamdebeasi @rricamar FYI that updating to v5.2.2 has resolved the issue for me.

[liamdebeasi]

Awesome! Glad to hear this is resolved for you. I will close this, but if you run into any other bugs feel free to open a new issue.