Ionic-framework: Incorrect ion-content height after first keyboard show in a view

[vizeke]

Type: bug

Ionic Version: 1.3.*

Platform: android

Description
After navigate to a view, when you click on a text input for the first time the screen gets blank after the keyboard appears.

Steps to reproduce the probem

1. Navigate to a screen
2. Click on a input to open the keyboard for the first time (the subsequent input clicks works just fine)

Here is a vídeo showing the problem:
https://drive.google.com/open?id=0B7I6TA0ByZuvZ01PSlRJOXZucjA

A css height is applied to the ion-content tag to resize it, but the value is wrong.

Fix Sugestion

Tracking down the issue in the _js/views/scrollViewNative.js_ file, I found that since version 1.2.2 there's a ___originalContainerHeight_ variable to help adjust the screensize when the keyboard shows up. The problem is that the value of ___originalContainerHeight_ is set only after the keyboard is already open making it's value smaller than it should be.

In my case the solution was setting the ___originalContainerHeight_ in the _initialize_ method of the _ionic.views.ScrollNative_, inside the _ionic.requestAnimationFrame_ function, this way the screen is ready and the value from _getBoundingClientRect()_ is correct.

ionic.requestAnimationFrame(function() {
      self.__originalContainerHeight = self.el.getBoundingClientRect().height; //add line

      self.el.scrollTop = options.startY || 0;
      self.el.scrollLeft = options.startX || 0;

      self.__scrollTop = self.el.scrollTop;
      self.__scrollLeft = self.el.scrollLeft;
});

obs: This variable is also set in the _resetScrollView_ method of _ScrollNative_, after the keyboard is hiden, that's why it works after the first time.

Ionic Info:
Cordova CLI: 6.1.1
Gulp version: Requiring external module babel-register
Gulp local: CLI version 3.9.1
Ionic CLI Version: 1.7.15
Ionic App Lib Version: 0.7.2
OS: Windows 8.1
Node Version: v5.10.1

[jgw96]

Hello, thanks for opening an issue with us! Is this happening with the latest version of Ionic 1? Ionic 1.3.1

[vizeke]

Yes. I had the same problem on 1.3.0 and 1.3.1

[adamwlarson]

I am getting the exact same issue as vizeke, the very first time the ion-content size on Android is really small, causing all my bottom fixed elements to flow near the top of the screen. Upon closing the keyboard and reopening it fixes itself. I'm working on testing out the suggested fix by vizeke.

EDIT: The change did indeed work for me as well.

[nevace]

This issue has been driving be crazy for days and can't believe it hasn't affected more people! Thanks so much for the fix @vizeke. Can this fix please updated? I'll submit a pull request if needed.

[calummoore]

I have also experienced this issue on iOS: Ionic v1.3.1

I have a modal view which has an <ion-content>, <ion-footer-bar keyboard-attach> and <ion-header-bar overflow-scroll="true">.

It appears that when the keyboard first opens, the new viewport height is calculated and that is added to the <ion-content style='height: xxpx;'> dynamically. I'm not sure why Ionic is adding the dynamically calculated height, as there is already a top style applied (using CSS) and bottom property calculated dynamically (top and bottom alone are enough to make the viewport the correct size/position).

In fact, if I remove the dynamically added height, it works perfectly. I simply removed this line, which fixed the code for me.

container.style.height = scrollViewOffsetHeight + "px";

Line 396 - https://github.com/driftyco/ionic/blob/1.x/js/views/scrollViewNative.js

Does anyone know why this code was added? Do we think we can remove it?

[enda]

I have also experienced this issue on android with ionic 1.3.1.

As @calummoore says, I simply added a css "height: auto !important" on my bugged ion-content and it now works like a charm, since top and bottom are enougth to make the viewport corrections.

[bsautel]

Thanks @enda, I am also facing this issue and your suggested workaround enabled me to fix the issue!

[jgw96]

This issue was moved to driftyco/ionic-v1#137

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.