fix(viewport): Remove height value on iOS browser

Author: Adam Bradley

Diff for: js/utils/viewport.js

@@ -25,18 +25,23 @@ function viewportLoadTag() {
 }
 
 function viewportInitWebView() {
-  var hasViewportChange = false;
+  var initHeight = viewportProperties.height;
 
   if( ionic.Platform.isWebView() ) {
-    if( viewportProperties.height != 'device-height' ) {
-      viewportProperties.height = 'device-height';
-      hasViewportChange = true;
-    }
+    viewportProperties.height = 'device-height';
+
+  } else if( ionic.Platform.isIOS() && viewportProperties.height ) {
+    // if its not a webview, and a viewport height was set, just removing
+    // the height value doesn't trigger the change, but setting to 0 does the trick
+    viewportProperties.height = '0';
+
   } else if( viewportProperties.height ) {
     delete viewportProperties.height;
-    hasViewportChange = true;
   }
-  if(hasViewportChange) viewportUpdate();
+
+  // only update the viewport tag if there was a change
+  if(initHeight !== viewportProperties.height) viewportUpdate();
+  console.debug(viewportTag.content)
 }
 
 function viewportUpdate(updates) {
@@ -49,7 +54,7 @@ function viewportUpdate(updates) {
     if(viewportProperties[key]) props.push(key + '=' + viewportProperties[key]);
   }
 
-  viewportTag.content = props.join(',');
+  viewportTag.content = props.join(', ');
 }
 
 ionic.DomUtil.ready(function() {

Diff for: test/unit/utils/keyboard.unit.js

@@ -41,25 +41,25 @@ Tested On
 - Android 4.2 Cordova
 
 
-iOS 7.1 Cordova with AND without viewport height DOES resize, DOES NOT fire resize event 
+iOS 7.1 Cordova with AND without viewport height DOES resize, DOES NOT fire resize event
 iOS 7.1 Safari with AND without viewport height DOES NOT resize
 
 iOS 7.0 Cordova with viewport height DOES resize, DOES fire resize event
 iOS 7.0 Cordova without viewport height DOES resize, DOES NOT fire resize event
 iOS 7.0 Safari with AND without viewport height DOES NOT resize
 
 iOS 6.1 Cordova with AND without viewport height DOES NOT resize
-iOS 6.1 Safari without viewport height DOES NOT resize 
+iOS 6.1 Safari without viewport height DOES NOT resize
 
-NOTES: 
+NOTES:
  -iOS 7.1 Safari with viewport height screws up ionic layout
  -iOS 7.0 Safari with viewport height, the scroll view does not resize properly on keyboardhide
  -iOS 7.0 Cordova without viewport height, scroll view does not resize properly switching inputs at bottom of page
- -iOS 6.1 Cordova and Safari don't work well with viewport height 
+ -iOS 6.1 Cordova and Safari don't work well with viewport height
 
 RECOMMENDATIONS:
  -iOS 7.1 Cordova no viewport height, keyboard is not over webview
- -iOS 7.1 Safari no viewport height, keyboard is over webview 
+ -iOS 7.1 Safari no viewport height, keyboard is over webview
 
  -iOS 7.0 Cordova yes viewport height, keyboard is not over webview
  -iOS 7.0 Safari no viewport height, keyboard is over webview
@@ -215,18 +215,6 @@ describe('Ionic Keyboard', function() {
     expect( details.isElementUnderKeyboard ).toEqual(false);
   });
 
-  it('Should not subtract the keyboard height from the contentHeight if not keyboardIsOverWebView()', function(){
-    var element = document.createElement('textarea');
-    var elementTop = 300;
-    var elementBottom = 400;
-    var keyboardHeight = 200;
-    var deviceHeight = 260;
-    window.innerHeight = 260;
-    var details = keyboardShow(element, elementTop, elementBottom, deviceHeight, keyboardHeight);
-
-    expect( details.contentHeight ).toEqual(260);
-  });
-
   it('Should subtract the keyboard height from the contentHeight if keyboardIsOverWebView()', function(){
     ionic.Platform.setPlatform('iOS');
     ionic.Platform.setVersion('7.1');

Diff for: test/unit/utils/viewport.unit.js

@@ -12,10 +12,12 @@
  iOS 6.1 Safari without viewport height DOES NOT resize
 
  NOTES:
-   -iOS 7.1 Safari with viewport height screws up ionic layout
-   -iOS 7.0 Safari with viewport height, the scroll view does not resize properly on keyboardhide
-   -iOS 7.0 Cordova without viewport height, scroll view does not resize properly switching inputs at bottom of page
-   -iOS 6.1 Cordova and Safari don't work well with viewport height
+   - iOS 7.1 Safari with viewport height screws up ionic layout
+   - iOS 7.0 Safari with viewport height, the scroll view does not resize properly on keyboardhide
+   - iOS 7.0 Cordova without viewport height, scroll view does not resize properly switching inputs at bottom of page
+   - iOS 6.1 Cordova and Safari don't work well with viewport height
+   - If its not a webview, and a viewport height was set, just removing
+     the height value doesn't trigger the change, but setting height=0 does the trick
 
  RECOMMENDATIONS:
    -iOS 7.1 Cordova no viewport height, keyboard is not over webview
@@ -122,4 +124,14 @@ describe('Ionic Viewport', function() {
     expect( vportTag.content ).toEqual(originalViewport);
   });
 
+  it('Should set height=0 if browser and height=device-height was already in', function(){
+    ionic.Platform.setPlatform('ios');
+    var originalViewport = 'initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, height=device-height';
+    vportTag.setAttribute('content', originalViewport);
+    viewportLoadTag();
+
+    // if it was changed the spaces would have been removed
+    expect( vportTag.content ).toEqual('initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, height=0');
+  });
+
 });