ionic-framework: bug: scroll assist needs improved keyboard estimation on web
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
On iOS Safari (and as an app with “Add to Home Screen”), there is an uncomfortable pause when switching between inputs.
Expected Behavior
When tapping another input on the page to switch focus, there should be no delay when no scrolling is required and keyboard remains open.
Steps to Reproduce
- Open following app in Safari on iOS/iPadOS device or simulator:
- with “Device Preview” QR-code on https://dashboard.ionicframework.com/preview/f7e6e842/mbb6khxjl9
- or directly at https://mbb6khxjl9.appflowapp.com/
- tap “Address Line 1”
- caret appears at the beginning of Address Line 1
- keyboard shows up
- tap “Address Line 2”
- caret disappears from “Address Line 1”
- keyboard stays open
- – awkward pause lasting about a second –
- caret appears at the beginning of Address Line 2
reproducible on:
- iPad Air 2 (iPadOS 14.6)
- iPhone 12 mini (iOS 14.4; on Simulator)
Code Reproduction URL
https://github.com/ippeiukai/ionic-safari-input-issue-23664
Ionic Info
$ ionic info
Ionic:
Ionic CLI : 5.4.16 (/■■■■■■■/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 5.6.11
@angular-devkit/build-angular : 12.1.2
@angular-devkit/schematics : 12.1.2
@angular/cli : 12.1.2
@ionic/angular-toolkit : 4.0.0
Capacitor:
Capacitor CLI : 3.1.1
@capacitor/core : 3.1.1
Utility:
cordova-res : not installed
native-run : 1.4.0
System:
NodeJS : v12.22.3 (/■■■■■■■/bin/node)
npm : 6.14.13
OS : macOS Catalina
────────────────────────────────────────────────────────────
Ionic CLI update available: 5.4.16 → 6.11.8
The package name has changed from ionic to @ionic/cli!
To update, run: npm uninstall -g ionic
Then run: npm i -g @ionic/cli
────────────────────────────────────────────────────────────
Additional Information
Observing the DOM with Web Inspector suggests the relocateInput hack is being executed when “Address Line 2” is tapped, although there is no scrolling happening and the keyboard is already open and remains open.
https://github.com/ionic-team/ionic-framework/blob/v5.6.11/core/src/utils/input-shims/hacks/common.ts#L14
Our production app (which uses @ionic/angular 5.3.3) is affected and one of the views has severely degraded user experience as a result. Any help or workaround would be greatly appreciated.
About this issue
- Original URL
- State: open
- Created 3 years ago
- Reactions: 2
- Comments: 19 (8 by maintainers)
@corysmc Second this, “scrollAssist: false” fixes it. Despite any repercussions caused in iOS or Android builds. I refuse to “add blank space at bottom of your ion-content”. Seems silly even if it works. This is not our fault and the failure of ionic dev team. Should be properly fixed truly. I refuse to hinder UX design at my own cost.
https://github.com/ionic-team/ionic-framework/issues/13414 The link above shows that this has been an issue since 2017. Of course, Ionitron Bot closed it, nothing new there. This is a problem with ionic dev team and they seem to have refused to provide a solid fix for it. If I am wrong and there is an actual fix besides this, please correct me @liamdebeasi or let me know. Just stating facts from what I have seen since 2017.
The code that handles scroll assist is here: https://github.com/ionic-team/ionic-framework/blob/7315e0157b917d2e3586c64f8082026827812943/core/src/utils/input-shims/hacks/scroll-assist.ts
You can also disable scroll assist for now by setting
scrollAssist: falsein your Ionic config. This allows you to avoid this behavior while continuing to useion-input.Any updates on this issue?
@lucrus73 I’m on Ionic 7.0.0 and it still occurs. Huge pain, even the workaround that others have mentioned doesn’t work for me. Heavily making me consider developing native because of this bug, makes everything feel janky. I’ve noticed some lag also occurs similarly for buttons, on first click its laggy then after its fine.
Any update on this issue? It really kills the UX…