bug: Keyboard expansion unable to push bottom elements

[JACKZGGG]

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

Please forgive me for using translation software
On my Android phone, when I click on the input field, the keyboard pushes the bottom element as it expands, but on ios, it behaves strangely (it doesn't during the process, it suddenly appears on top of the keyboard after it expands).

I also saw a similar problem, ionic also gave a solution, but unfortunately, I still can not solve
Below is a video of the same problem that I pasted
https://github.com/ionic-team/ionic-framework/assets/159008409/40d08285-c223-4473-91fd-f62e3a7cf1fc

Expected Behavior

I want it should be the bottom element should be pushed and have a similar animation effect

Steps to Reproduce

Any input box that triggers the keyboard will appear

Code Reproduction URL

No response

Ionic Info

Ionic:
Ionic CLI : 7.1.5
Ionic Framework : @ionic/vue 7.0.0

Capacitor:
Capacitor CLI : 5.5.1
@capacitor/android : 5.5.1
@capacitor/core : 5.5.1
@capacitor/ios : 5.5.1

Utility:

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

System:

NodeJS : v19.7.0
npm : 9.5.0
OS : Linux 6.5

Additional Information

I can understand the idea of the solution（https://ionic.io/blog/keyboard-improvements-for-ionic-apps）, but the events mentioned in the document are triggered when the keyboard is immediately popped up and when the expansion is finished, which means that I cannot always know the height of the current keyboard (translateY can only be set twice, so there will not be the boost effect I want).

same problem
#28226

[JACKZGGG]

This is an example I wrote as documented, and it only triggered the event twice, and I couldn't set the translateY value of the input in real time

`

ceshi

input:
<ion-input
class="message-input"
inputmode="email"
@mousedown.stop
>

<script setup> import { IonPage, IonItem, IonLabel, IonInput, onIonViewDidEnter } from '@ionic/vue'; onIonViewDidEnter(()=>{ const input = document.querySelector('ion-input'); window.addEventListener('ionKeyboardDidShow', ev => { const { keyboardHeight } = ev.detail; console.log('ionKeyboardDidShow', keyboardHeight); input.style.setProperty( 'transform', `translate3d(0, -${keyboardHeight}px, 0)`, ); }); window.addEventListener('ionKeyboardDidHide', () => { console.log('ionKeyboardDidHide'); input.style.removeProperty('transform'); }); }) </script>`

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. Setting transform moves the element immediately. To get it to animate, you need to add a transition-timing-function.

You didn't provide a reproduction, so I don't know what your application setup looks like. However, a couple things to keep in mind:

1. You may need to adjust the webview resize mode on iOS.
2. You may want to consider listening for the keyboardWillShow event instead if you are still running into timing issues. ionKeyboardDidShow only fires after the keyboard is fully visible. keyboardWillShow (which is a Capacitor/Cordova-only event) will fire before the keyboard is fully visible.