search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.07k stars 13.51k forks source link

bug: modal is not consistently shifted upwards when keyboard is shown on ipad #29156

Open jeroenkroese opened 8 months ago

jeroenkroese commented 8 months ago

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

On large touch device (ipad), modal is not consistently shifted upwards when keyboard is shown after clicking an input. See video

https://github.com/ionic-team/ionic-framework/assets/16576066/4f769206-ee84-4512-bd41-599e516cd348

Expected Behavior

The content is consistenly shifted upward to make sure that the focussed input is in view.

Steps to Reproduce

  1. Use iPad
  2. Open modal
  3. Click input

Code Reproduction URL

https://github.com/jeroenkroese/ModalKeyboardBug

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

   Require stack:
   - /Users/jeroenkroese/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli/lib/project/index.js
   - /Users/jeroenkroese/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli/lib/index.js
   - /Users/jeroenkroese/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli/index.js
   - /Users/jeroenkroese/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli/bin/ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

   Require stack:
   - /Users/jeroenkroese/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli/lib/project/index.js
   - /Users/jeroenkroese/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli/lib/index.js
   - /Users/jeroenkroese/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli/index.js
   - /Users/jeroenkroese/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 7.2.0 (/Users/jeroenkroese/.nvm/versions/node/v18.19.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.8.0 @angular-devkit/build-angular : 17.2.3 @angular-devkit/schematics : 17.2.3 @angular/cli : 17.2.3 @ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.7.2 @capacitor/android : not installed @capacitor/core : 5.7.2 @capacitor/ios : not installed

Utility:

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

System:

NodeJS : v18.19.0 (/Users/jeroenkroese/.nvm/versions/node/v18.19.0/bin/node) npm : 10.2.3 OS : macOS Unknown

Additional Information

No response

sean-perkins commented 7 months ago

@jeroenkroese hello, thanks for reporting this issue.

Are you using an alternate browser engine on your iPad? If so, can you share those details about your environment?

The keyboard relocation behavior in Ionic Framework is very specific to webkit behavior. I'm not currently able to reproduce with iPad Pro on iOS 17 (using Safari).

jeroenkroese commented 7 months ago

Hi @sean-perkins thanks for replying.

The iPad shown in the video is an iPad Air 4th generation on iOS 17.3.1. I was using the Chrome browser, however I see the same behaviour using Safari. I've since updated the iPad to 17.4 but the issue persists.

I have tried to reproduce using a device simulator on MacOS. I was not able to reproduce on an iPad Pro in the simulator, but the issue manifests when selecting an iPad Air 4th generation as device type, on iOS 17.4 and in landscape mode.

Hopefully this helps you reproduce the issue on your own device. Let me know if you need anything else.