bug: Popover position wrong on Windows Phone

[vjrantal]

Type: bug

Platform: windows

Popover position calculation doesn't work correctly on IE and the end result is that popovers gets rendered off viewport. See the screenshot below where the issue is highlighted with a red rectangle.

The issue is reproducible by opening http://codepen.io/ionic/pen/GpCst (and trying to see the popover). Same issue occurs on both desktop IE 11 and the IE mobile 11 on Windows Phone 8.1. Also, the issue is visible on Cordova-packaged apps run on Windows Phone 8.1.

The root cause seems to be the different value IE returns to $document[0].body.clientWidth when it is called to calculate the correct popover position.

The following diff fixes the issue:

diff --git a/js/angular/service/popover.js b/js/angular/service/popover.js
index 3bfa6eb..d410aac 100644
--- a/js/angular/service/popover.js
+++ b/js/angular/service/popover.js
@@ -93,8 +93,9 @@ function($ionicModal, $ionicPosition, $document, $window) {
     var buttonOffset = $ionicPosition.offset(targetEle);
     var popoverWidth = popoverEle.prop('offsetWidth');
     var popoverHeight = popoverEle.prop('offsetHeight');
-    var bodyWidth = $document[0].body.clientWidth;
-    // clientHeight doesn't work on all platforms for body
+    // Use innerWidth and innerHeight, because clientWidth and clientHeight
+    // doesn't work consistently for body on all platforms
+    var bodyWidth = $window.innerWidth;
     var bodyHeight = $window.innerHeight;

Tested briefly on iOS and Android and seems like the diff doesn't bring regressions to this functionality on those platforms.