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?