How to get an input to reposition smoothly when the keyboard appears in a Ionic+Capacitor app

Question

I'm working on a Ionic app that includes a chat. Very early on, I've ran into something that is makig me question my choice of technology.

As most chat apps, I have a text input at the bottom of the page for the user to input their message. When the keyboard appears, this input must move up to show above the keyboard. However, the way it does it is terrible: after the keyboard appears, the input teleports up. It should move up together with the keyboard, and hide together with it as well.

Here's a short video showing the janky behaviour on my Ionic app: https://www.youtube.com/shorts/bE3J7QCPLBM

And here's an example of the behaviour I'd like to see: https://youtube.com/shorts/-o2ciVl0LYU?feature=share

This makes the app feel extremely cheap, and it's a very important interaction in this app.

I'm using a IonTextarea inside an IonFooter, inside an IonPage. This behaviour happens on a real device and in the simulator.

I've tried tweaking the resize configuration option through @capacitor/keyboard and none of the options changed anything.

I've been looking at some production apps made with Ionic but none of them how inputs in the lower part of the screen. Interestingly, testing this code in Safari, the browser does handle this interaction smoothly.

My code, which I think is the naive, expected way to do this:

const Page: React.FC = () => {
  /* ... */

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          {/* ... */}
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen>
        <NotesList notes={notes} />
      </IonContent>


      <IonFooter className='border-t border-t-gray-500 py-2 px-3' translucent>
        <IonTextarea
          className='p-1 border border-gray-700 rounded bg-white'
         />
      </IonFooter>
    </IonPage>
  );
};

EDIT: The only possible solution I see is to monitor the keyboard appearing with the keyboardWillShow event, which gives you the keyboard height, and position the input absolutely, making it move together with the keyboard through a CSS transition. I can't know at what speed the keyboard will move though, which will be different for every OS.

I hoped this kind of thing to be a wheel I didn't have to reinvent using Ionic, so I hope there is a better fix.