From 0ad10edefcdcc67d20fb837f635609974af5dbd7 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 30 Apr 2014 14:04:32 -0500 Subject: [PATCH] fix(viewport): Remove height value on iOS browser --- js/utils/viewport.js | 21 +++++++++++++-------- test/unit/utils/keyboard.unit.js | 22 +++++----------------- test/unit/utils/viewport.unit.js | 20 ++++++++++++++++---- 3 files changed, 34 insertions(+), 29 deletions(-) diff --git a/js/utils/viewport.js b/js/utils/viewport.js index 68ef3cee67..fe240166d4 100644 --- a/js/utils/viewport.js +++ b/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 --git a/test/unit/utils/keyboard.unit.js b/test/unit/utils/keyboard.unit.js index f419083d5a..d9c3d3dcdd 100644 --- a/test/unit/utils/keyboard.unit.js +++ b/test/unit/utils/keyboard.unit.js @@ -41,7 +41,7 @@ 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 @@ -49,17 +49,17 @@ 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 --git a/test/unit/utils/viewport.unit.js b/test/unit/utils/viewport.unit.js index 3dd2902982..d0257455fd 100644 --- a/test/unit/utils/viewport.unit.js +++ b/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'); + }); + });