commit 57f942670c84412b61bc05dd67c5b505edb4b67d
author Vladimir Kotikov <v-vlkoti@microsoft.com> Thu Feb 05 17:14:41 2015 +0300
committer Vladimir Kotikov <v-vlkoti@microsoft.com> Tue Mar 17 14:18:04 2015 +0300
tree 91ea2fb21cdda968ac4e92636f5eafa63833c150
parent ed1227f61ac24c712558600002d11e2691754b65

CB-8432 Correct styles for browser wrapper to display it correctly on some pages

* Force z-order for wrapper to show it on top of the whole page
* Apply CSS reset rules to browser wrapper
* Disable parent window scrollbars when browser is shown

src/windows/InAppBrowserProxy.js

diff --git a/src/windows/InAppBrowserProxy.js b/src/windows/InAppBrowserProxy.js
index 07fa79e..da5eb82 100644
--- a/src/windows/InAppBrowserProxy.js
+++ b/src/windows/InAppBrowserProxy.js
@@ -110,20 +110,30 @@
             // "_blank" or anything else
             if (!browserWrap) {
                 browserWrap = document.createElement("div");
-                browserWrap.style.position = "absolute";
-                browserWrap.style.borderWidth = "40px";
-                browserWrap.style.width = "calc(100% - 80px)";
-                browserWrap.style.height = "calc(100% - 80px)";
-                browserWrap.style.borderStyle = "solid";
-                browserWrap.style.borderColor = "rgba(0,0,0,0.25)";
+                // First reset all styles for inappbrowser wrapper element
+                browserWrap.style.cssText = "margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background: 0 0;";
+                browserWrap.style.position = "fixed";
+                browserWrap.style.top = "0px";
+                browserWrap.style.left = "0px";
+                browserWrap.style.width = "100%";
+                browserWrap.style.height = "100%";
+                browserWrap.style.zIndex = 9999;
+                browserWrap.style.border = "40px solid rgba(0,0,0,0.25)";
+
+                // Save body overflow style to be able to reset it back later
+                var bodyOverflow = document.body.style.msOverflowStyle;
 
                 browserWrap.onclick = function () {
                     setTimeout(function () {
+                        // Reset body overflow style to initial value
+                        document.body.style.msOverflowStyle = bodyOverflow;
                         IAB.close(win);
                     }, 0);
                 };
 
                 document.body.appendChild(browserWrap);
+                // Hide scrollbars for the whole body while inappbrowser's window is open
+                document.body.style.msOverflowStyle = "none";
             }
 
             if (features.indexOf("hidden=yes") !== -1) {
@@ -131,6 +141,11 @@
             }
 
             popup = document.createElement(isWebViewAvailable ? "x-ms-webview" : "iframe");
+            if (popup instanceof HTMLIFrameElement) {
+                // For iframe we need to override bacground color of parent element here
+                // otherwise pages without background color set will have transparent background
+                popup.style.backgroundColor = "white";
+            }
             popup.style.borderWidth = "0px";
             popup.style.width = "100%";
 
@@ -257,4 +272,4 @@
 
 module.exports = IAB;
 
-require("cordova/exec/proxy").add("InAppBrowser", module.exports);
\ No newline at end of file
+require("cordova/exec/proxy").add("InAppBrowser", module.exports);