Possible to have smooth keyboard slide-ins?

I was just comparing ChatGPT to my app on keyboard focus and it’s pretty rough. Any way to fix? I am using Ionic/Vue. @ldebeasi I feel like this is something you might know about?


My app:

Smooth keyboard transitions are hard to do because the input is in the web layer but the keyboard is in the native layer. As a result, the animations will never be perfectly in sync. However, there are a couple things you can do to get pretty close:

  1. Use something other than the “Native” resize Keyboard behavior: Keyboard Capacitor Plugin API | Capacitor Documentation This causes the entire webview to resize which is likely causing the noticeable jump in your demo. Using other values will prevent the entire webview from resizing. You may need to try all the options as I’m not sure where the input is in the DOM in your demo. You may end up just wanting to use the “None” option.

  2. Use a keyboardWillShow listener to detect when the keyboard is about to open and translate the input by the keyboard height. The event payload gives you the height of the keyboard. You can then apply a translateY transform with a transition to smoothly animate the input above the keyboard. Don’t forget to also listen for keyboardWillHide to remove the transform.

I wrote a blog using the Ionic Keyboard Events that has similar code you can use: Keyboard improvements for Ionic Apps - Ionic Blog

Makes sense what you’re saying Liam. Is it possible for you to post the example you use in the article? You are doing exactly what I am trying to accomplish. I am building a chat bot app so it looks very smooth what you did but I don’t see any code example. Lmk if that’s available!

Sadly I don’t have the source code for that anymore, but the code snippets show generally what you’ll need to do for the input. The code was written in vanilla JS, but it should be adaptable to whatever framework you are using.