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

[jgw96]

From @vizeke on May 31, 2016 20:2

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

Copied from original issue: driftyco/ionic#6715

[jgw96]

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

[jgw96]

From @vizeke on May 31, 2016 20:42

Yes. I had the same problem on 1.3.0 and 1.3.1

[jgw96]

From @adamwlarson on June 3, 2016 16:31

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.

[jgw96]

From @nevace on July 18, 2016 9:44

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.

[jgw96]

From @calummoore on September 14, 2016 19:50

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?

[jgw96]

From @enda on September 27, 2016 14:56

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.

[jgw96]

From @bsautel on October 6, 2016 13:37

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