From 96549e808b0fa467f454b8a86e2fb0e2099687f7 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 19 May 2017 02:04:23 +0200
Subject: [PATCH] fix(overlay): overlays potentially being rendered behind
 browser UI (#4664)

Reverts back from using viewport units to size up the overlay container. Using viewport units can cause some overlays (e.g. the snack bar) to be rendered behind the native browser UI.

Fixes #4650.
---
 src/lib/core/overlay/_overlay.scss                          | 6 ++----
 .../overlay/position/connected-position-strategy.spec.ts    | 6 +++---
 .../core/overlay/position/connected-position-strategy.ts    | 5 ++---
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/lib/core/overlay/_overlay.scss b/src/lib/core/overlay/_overlay.scss
index 032376df0e8..ea5034b7ff8 100644
--- a/src/lib/core/overlay/_overlay.scss
+++ b/src/lib/core/overlay/_overlay.scss
@@ -9,10 +9,8 @@
     // The container should be the size of the viewport.
     top: 0;
     left: 0;
-
-    // Note: we prefer viewport units, because they aren't being offset by the global scrollbar.
-    height: 100vh;
-    width: 100vw;
+    height: 100%;
+    width: 100%;
   }
 
   // The overlay-container is an invisible element which contains all individual overlays.
diff --git a/src/lib/core/overlay/position/connected-position-strategy.spec.ts b/src/lib/core/overlay/position/connected-position-strategy.spec.ts
index c21fe16ec2f..e978d7d69e8 100644
--- a/src/lib/core/overlay/position/connected-position-strategy.spec.ts
+++ b/src/lib/core/overlay/position/connected-position-strategy.spec.ts
@@ -433,7 +433,7 @@ describe('ConnectedPositionStrategy', () => {
         let overlayRect = overlayElement.getBoundingClientRect();
 
         expect(Math.floor(overlayRect.top)).toBe(Math.floor(originRect.bottom));
-        expect(Math.floor(overlayRect.right)).toBe(Math.floor(originRect.left));
+        expect(Math.round(overlayRect.right)).toBe(Math.round(originRect.left));
       });
 
       it('should position above, right aligned', () => {
@@ -445,8 +445,8 @@ describe('ConnectedPositionStrategy', () => {
         strategy.apply(overlayElement);
 
         let overlayRect = overlayElement.getBoundingClientRect();
-        expect(Math.floor(overlayRect.bottom)).toBe(Math.floor(originRect.top));
-        expect(Math.floor(overlayRect.right)).toBe(Math.floor(originRect.right));
+        expect(Math.round(overlayRect.bottom)).toBe(Math.round(originRect.top));
+        expect(Math.round(overlayRect.right)).toBe(Math.round(originRect.right));
       });
 
       it('should position below, centered', () => {
diff --git a/src/lib/core/overlay/position/connected-position-strategy.ts b/src/lib/core/overlay/position/connected-position-strategy.ts
index a11b5fdf3ee..be515bcb1ce 100644
--- a/src/lib/core/overlay/position/connected-position-strategy.ts
+++ b/src/lib/core/overlay/position/connected-position-strategy.ts
@@ -354,7 +354,6 @@ export class ConnectedPositionStrategy implements PositionStrategy {
       overlayRect: ClientRect,
       overlayPoint: Point,
       pos: ConnectionPositionPair) {
-    const  viewport = this._viewportRuler.getViewportRect();
 
     // We want to set either `top` or `bottom` based on whether the overlay wants to appear above
     // or below the origin and the direction in which the element will expand.
@@ -364,7 +363,7 @@ export class ConnectedPositionStrategy implements PositionStrategy {
     // from the bottom of the viewport rather than the top.
     let y = verticalStyleProperty === 'top' ?
         overlayPoint.y :
-        viewport.height - (overlayPoint.y + overlayRect.height);
+        document.documentElement.clientHeight - (overlayPoint.y + overlayRect.height);
 
     // We want to set either `left` or `right` based on whether the overlay wants to appear "before"
     // or "after" the origin, which determines the direction in which the element will expand.
@@ -381,7 +380,7 @@ export class ConnectedPositionStrategy implements PositionStrategy {
     // from the right edge of the viewport rather than the left edge.
     let x = horizontalStyleProperty === 'left' ?
       overlayPoint.x :
-      viewport.width - (overlayPoint.x + overlayRect.width);
+      document.documentElement.clientWidth - (overlayPoint.x + overlayRect.width);
 
 
     // Reset any existing styles. This is necessary in case the preferred position has