fix(overlay): fix connected position calculation while scrolled (angu…

…lar#1732)

src/lib/core/overlay/position/connected-position-strategy.spec.ts

@@ -20,6 +20,7 @@ describe('ConnectedPositionStrategy', () => {
 
   let originElement: HTMLElement;
   let overlayElement: HTMLElement;
+  let overlayContainerElement: HTMLElement;
   let strategy: ConnectedPositionStrategy;
   let fakeElementRef: ElementRef;
   let fakeViewportRuler: FakeViewportRuler;
@@ -34,17 +35,19 @@ describe('ConnectedPositionStrategy', () => {
 
     // The origin and overlay elements need to be in the document body in order to have geometry.
     originElement = createPositionedBlockElement();
+    overlayContainerElement = createFixedElement();
     overlayElement = createPositionedBlockElement();
     document.body.appendChild(originElement);
-    document.body.appendChild(overlayElement);
+    document.body.appendChild(overlayContainerElement);
+    overlayContainerElement.appendChild(overlayElement);
 
     fakeElementRef = new FakeElementRef(originElement);
     positionBuilder = new OverlayPositionBuilder(new ViewportRuler());
   });
 
   afterEach(() => {
     document.body.removeChild(originElement);
-    document.body.removeChild(overlayElement);
+    document.body.removeChild(overlayContainerElement);
 
     // Reset the origin geometry after each test so we don't accidently keep state between tests.
     originRect = null;
@@ -359,6 +362,18 @@ function createPositionedBlockElement() {
   return element;
 }
 
+/** Creates an position: fixed element that spans the screen size. */
+function createFixedElement() {
+  let element = document.createElement('div');
+  element.style.position = 'fixed';
+  element.style.top = '0';
+  element.style.left = '0';
+  element.style.width = `100%`;
+  element.style.height = `100%`;
+  element.style.zIndex = '100';
+  return element;
+}
+
 
 /** Fake implementation of ViewportRuler that just returns the previously given ClientRect. */
 class FakeViewportRuler implements ViewportRuler {

src/lib/core/overlay/position/connected-position-strategy.ts

@@ -217,10 +217,8 @@ export class ConnectedPositionStrategy implements PositionStrategy {
    * @param overlayPoint
    */
   private _setElementPosition(element: HTMLElement, overlayPoint: Point) {
-    let scrollPos = this._viewportRuler.getViewportScrollPosition();
-
-    let x = overlayPoint.x + scrollPos.left;
-    let y = overlayPoint.y + scrollPos.top;
+    let x = overlayPoint.x;
+    let y = overlayPoint.y;
 
     // TODO(jelbourn): we don't want to always overwrite the transform property here,
     // because it will need to be used for animations.