bug: scroll assist doesn't work when clicking ion-input

[kamilchlebek]

Prequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [X] v5.x
• [ ] v6.x

Current Behavior

The content is scrolled only when clicking ion-label

https://user-images.githubusercontent.com/40219331/134133513-b3909fa0-1646-4b17-80e7-6b0072742627.mov

Expected Behavior

The content is scrolled when clicking ion-label or ion-input

Steps to Reproduce

1. ionic serve
2. Click on red area near bottom of the screen (ion-input) :x: content not scrolled
3. Close keyboard
4. Click on green area near bottom of the screen (ion-label) ✅ content scrolled

Code Reproduction URL

https://github.com/kamilchlebek/ionic-ios-scroll-issue

Ionic Info

Ionic:

   Ionic CLI                     : 6.12.3
   Ionic Framework               : @ionic/angular 5.8.0
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.1.4
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Utility:

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

System:

   NodeJS : v12.16.1
   npm    : 6.13.4
   OS     : macOS Big Sur

Additional Information

The issue happens on iOS. I can reproduce the issue both on real device and simulator.

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of https://github.com/ionic-team/ionic-framework/issues/18532. As for why it appears to work when tapping ion-label, it looks like the entire view is getting shifted up. This is a result of iOS trying to shift the view (notice that the ion-header disappears).

[kamilchlebek]

@liamdebeasi Thank you for response.

I can't see any workaround for app running inside browser. Is there anything I can do before work mentioned in #18532 is done?

PS. weirdly enough I've got another form in real application for which scrolling seems to work fine. I wasn't yet able to create minimal reproduction.

[liamdebeasi]

The scroll padding utility (https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/input-shims/hacks/scroll-padding.ts) is what is broken right now, so setting --keyboard-offset to your ion-content should resolve the issue. (I believe we estimate --keyboard-offset to ~290px on the web)

[kamilchlebek]

Just for the record. Hardcoding --keyboard-offset won't do the job. I'd like to revert --keyboard-offset to 0 when keyboard is hidden.

For now I'm using modified version of scroll-padding.ts with these lines commented out: https://github.com/ionic-team/ionic-framework/blob/3ca04197a4186c85d04cdf04fa9cb2689ca1bbfb/core/src/utils/input-shims/hacks/scroll-padding.ts#L26-L28

I'm not sure what are it's possible consequences, but seems to work.

I run custom code only for isPlatform('ios') && isPlatform('mobileweb')

[liamdebeasi]

You can also try using the keyboard lifecycle events if you'd prefer not to modify Ionic code: https://ionicframework.com/docs/developing/keyboard#keyboard-lifecycle-events

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