fix(keyboard): fix blank spot. Fixes #4849 and #4645

Author: mlynch

Diff for: js/views/scrollViewNative.js

@@ -221,6 +221,12 @@
       var oldOverflowX = self.el.style.overflowX;
       var oldOverflowY = self.el.style.overflowY;
 
+      clearTimeout(self.__scrollToCleanupTimeout);
+      self.__scrollToCleanupTimeout = setTimeout(function() {
+        self.el.style.overflowX = oldOverflowX;
+        self.el.style.overflowY = oldOverflowY;
+      }, 500);
+
       self.el.style.overflowY = 'hidden';
       self.el.style.overflowX = 'hidden';
 
@@ -326,14 +332,14 @@
       // save height when scroll view is shrunk so we don't need to reflow
       var scrollViewOffsetHeight;
 
+      var lastKeyboardHeight;
+
       /**
        * Shrink the scroll view when the keyboard is up if necessary and if the
        * focused input is below the bottom of the shrunk scroll view, scroll it
        * into view.
        */
       self.scrollChildIntoView = function(e) {
-        //console.log("scrollChildIntoView at: " + Date.now());
-
         // D
         var scrollBottomOffsetToTop = container.getBoundingClientRect().bottom;
         // D - A
@@ -357,7 +363,11 @@
         *  All commented calculations relative to the top of the viewport (ie E
         *  is the viewport height, not 0)
         */
-        if (!alreadyShrunk) {
+
+
+        var changedKeyboardHeight = lastKeyboardHeight && (lastKeyboardHeight !== e.detail.keyboardHeight);
+
+        if (!alreadyShrunk || changedKeyboardHeight) {
           // shrink scrollview so we can actually scroll if the input is hidden
           // if it isn't shrink so we can scroll to inputs under the keyboard
           // inset modals won't shrink on Android on their own when the keyboard appears
@@ -368,13 +378,15 @@
             var scrollBottomOffsetToBottom = e.detail.viewportHeight - scrollBottomOffsetToTop;
 
             // 0 or D - B if D > B           E - B                     E - D
-            var keyboardOffset = Math.max(0, e.detail.keyboardHeight - scrollBottomOffsetToBottom);
+            var keyboardOffset = e.detail.keyboardHeight - scrollBottomOffsetToBottom;
 
             ionic.requestAnimationFrame(function(){
               // D - A or B - A if D > B       D - A             max(0, D - B)
-              scrollViewOffsetHeight = scrollViewOffsetHeight - keyboardOffset;
+              scrollViewOffsetHeight = keyboardOffset >= 0 ? scrollViewOffsetHeight + keyboardOffset : scrollViewOffsetHeight - keyboardOffset;
+
               container.style.height = scrollViewOffsetHeight + "px";
 
+              container.classList.add('keyboard-up');
               //update scroll view
               self.resize();
             });
@@ -383,6 +395,8 @@
           self.isShrunkForKeyboard = true;
         }
 
+        lastKeyboardHeight = e.detail.keyboardHeight;
+
         /*
          *  _______
          * |---A---| <- top of scroll view
@@ -446,6 +460,12 @@
         if (self.isShrunkForKeyboard) {
           self.isShrunkForKeyboard = false;
           container.style.height = "";
+
+          // Read after setting this to avoid rendering issues like white boxes.
+          ionic.requestAnimationFrame(function() {
+            container.classList.remove('keyboard-up');
+          });
+
         }
         self.resize();
       };

Diff for: scss/_scaffolding.scss

@@ -209,6 +209,10 @@ ion-infinite-scroll {
     height: 100%;
     -webkit-transform: translate3d(0, 0, 0);   // fix iOS bug where relative children of scroller disapear while scrolling.  see: http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela
   }
+
+  &.keyboard-up {
+    overflow: hidden;
+  }
 }