Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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