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 doesn't work when clicking ion-input

See original GitHub issue

Prequisites

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

Ionic Framework Version

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

ionic serve
Click on red area near bottom of the screen (ion-input) ❌ content not scrolled
Close keyboard
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.

Issue Analytics

State:
Created 2 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

2reactions

liamdebeasicommented, Sep 24, 2021

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

1reaction

liamdebeasicommented, Sep 21, 2021

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)

Top Results From Across the Web

bug: scroll assist on ion-input and ion-textarea not (always ...

Current behavior: Clicking inside an input field does not scroll the page up so that the input field becomes visible. ... Other information:....

Ionic 4 – Keyboard scroll view when ion-input is focused

Hi Ionic Fans ! I'am facing a big problem with Ionic 4 and form. Sometimes, the keyboard move ion-input below navigationBar or keyboard...

Not able scroll to input in ionic app when focus on input in phone

Problem: Its not working in my ionic app, because of horizontal scroll also there, so when i click on input in mobile device,...

Keyboard improvements for Ionic Apps - Ionic Blog

For native apps, we've even gone as far as creating plugins to help ease the pain of keyboards. Thankfully, browser vendors have agreed...

signature=4c44794979d36c3b2c6e1161877175aa,ionic-framework ...

textarea: do not generate duplicate IDs between ion-input and ion-textarea ... input: improve reliability of scroll assist when accessory bar is enabled ......