Content Does Not Resize on Keyboard Open

[tylermakin]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x
[ ] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When opening keyboard in iOS, content does not resize. Content does resize when closing keyboard, which causes blank space at the top or bottom of screen, followed by a second resize that corrects the screen size once the keyboard is fully closed.

Expected behavior:
Content should resize with opening keyboard and both footer and header should remain visible so long as this.keyboard.disableScroll(true); is called.

Other information:
Video of issue: https://streamable.com/4tkoj

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.3.0
Xcode version: Xcode 8.3.1 Build version 8E1000a

[gvolkan]

+1, its big issue and ionic team members can not resolve that problem form version 1...
and its still issue on from 2.0.0 to 3.0.1 ....

[jgw96]

Hello @tylermakin, would you mind sharing a minimal repo we could use to reproduce this issue? Thanks!

[gvolkan]

i can share a repo from nice guy(thanks for that), https://github.com/yannbf/ionic3-components/blob/master/src/pages/miscellaneous/chat/messages/messages.html

this chat page has a input at bottom and if you focus to input, keyboard open and screen filliping :((( then input control is disappear and behind the keyboard pad.

[tylermakin]

Hello @jgw96, please let me know if this helps.

All examples on iPhone 6s running iOS 10.3.1 using the Ionic View app.

Analysis

It seems as though the content is being resized at the start of a keyboard disappearing and once a keyboard has fully disappeared, but not after a keyboard is fully open. Calling this.content.resize() does not seem to have any effect on the size or display of the content.

My suspicion is that something is amiss with the method of resizing content.

Ideally the content resizing would happen in sync with the keyboard appearing and disappearing as a smooth synced transition. If the content cannot be resized dynamically as the keyboard is animating in and out, it would be better to have the content resize at the start of the keyboard transition and a CSS transition with easing could be applied to give the illusion of a sync between the keyboard and content.

Example 1

example1.mov
example1.zip

No modifications.

App displays blank space at top of app when closing keyboard via cancel button, then adjusts to display correctly once keyboard is fully closed. Examples 1 and 1.5 are the same except the cancel key is clicked in Example 1 vs. a button in the <ion-content> is clicked in Example 1.5.

Example 1.5

example1.5.mov
example1.5.zip

Added button (does not affect behavior, just to illustrate an action)

Behavior is same as in Example 1, however when the keyboard closes the screen is resized with blank space at bottom of screen vs. top of screen in Example 1. Blank space appears in the same place as in Example 2, but position of keyboard in relation to content is the same as in Example 1.

Example 2

example2.mov
example2.zip

Added this.keyboard.disableScroll(true) on app initialization.

Keyboard appears and covers content at bottom of screen, including the footer. As keyboard disappears, footer jumps to position at top of keyboard then drops to bottom of screen once keyboard is completely gone.

[hayuki]

There seems to be an issue on Android as well. E.g: there are two input fields with a login button on the page, and you add a transparent footer with text to the bottom of the page. When you click on the first input and the keyboard pops up, the footer contents overlap the bottom of the main contents, i.e. the text in the footer overlaps the login button.

Try to add a footer with text to the Login page on the Ionic Conference App (I tried that) and click on the username input field to reproduce the issue (the text in the footer will overlap the "Sign in" button).

[pitamash]

ion-col,input,ion-input,col,.text-input {
position: initial !important;
}