iPhone - Scrollable View does not lift up when keyboard goes up

[jayordway]

I have the app on iOS, when the keyboard goes up, the scrollable view does not position itself to end at the top of the keyboard. It doesn't even try, it stays as is and you can't scroll it up manually too well at this point either.

When the keyboard is down everything scrolls as expected. Note: This same application works fine as expected on Android devices, this is happening on all of my iPhones, 6, 6s, 6sPlus, 8 Plus and X.

For now I have to do a hack and add space to where the chat ends that is near above the length of the keyboard, but with android it just works without any adjustment

Here is my info:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.18.0
ionic (Ionic CLI) : 3.18.0

global packages:

cordova (Cordova CLI) : 7.1.0 

local packages:

@ionic/app-scripts : 3.1.0
Cordova Platforms  : android 6.2.3 ios 4.5.1
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 25.2.5
ios-deploy        : 1.9.2 
ios-sim           : 5.0.13 
Node              : v6.11.5
npm               : 2.15.12 
OS                : macOS Sierra
Xcode             : Xcode 9.1 Build version 9B55 

Environment Variables:

ANDROID_HOME : /usr/local/Cellar/android-sdk/24.4.1_1/

[melvin-huss]

Dit you find a solution for this I'm having the same issue

[jayordway]

No. I basically detect the device type and dynamically add in the space using a hack also using the "scrollToBottom" function.

[jjbeach]

@jayordway i'm having a similar issue. Would you mind sharing your solution?

[frey1esm]

I was able to accomplish this with animation on ios by simply changing the bottom value on the messages div when the keyboard 'show' and 'hide' events are fired. When the keyboard is open open,the div's bottom is equal to the keyboard height + the input bar height (44px). When closed, bottom is 44px.

I added -webkit-transition: bottom 200ms ease-in-out to the class of the messages div for an acceptable animation.