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

[jeroenkroese]

Prerequisites

• 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

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

RPReplay_Final1710343317.MP4

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]

@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]

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.