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.

Author: crisbeto

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.

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', () => {

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