refactor(connected-position-strategy): use top/left instead of transforms for positioning

Switches the `ConnectedPositionStrategy` to use `top` and `left` for positioning, instead of `translateX` and `translateY`. This avoids having to do extra work to prevent subpixel rendering issues, while freeing up the transforms to be used on animations or for offsets.

Author: crisbeto

src/lib/core/overlay/overlay-directives.spec.ts

@@ -122,7 +122,7 @@ describe('Overlay directives', () => {
       // expected x value is the starting x + offset x
       const expectedX = startX + 5;
       const pane = overlayContainerElement.children[0] as HTMLElement;
-      expect(pane.style.transform).toContain(`translateX(${expectedX}px)`);
+      expect(pane.style.left).toBe(expectedX + 'px');
     });
 
     it('should set the offsetY', () => {
@@ -138,7 +138,7 @@ describe('Overlay directives', () => {
       // expected y value is the starting y + trigger height + offset y
       // 30 + 20 + 45 = 95px
       const pane = overlayContainerElement.children[0] as HTMLElement;
-      expect(pane.style.transform).toContain(`translateY(95px)`);
+      expect(pane.style.top).toBe('95px');
     });
 
   });

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

@@ -1,7 +1,6 @@
 import {PositionStrategy} from './position-strategy';
 import {ElementRef} from '@angular/core';
 import {ViewportRuler} from './viewport-ruler';
-import {applyCssTransform} from '../../style/apply-transform';
 import {
     ConnectionPositionPair,
     OriginConnectionPosition,
@@ -22,10 +21,10 @@ export class ConnectedPositionStrategy implements PositionStrategy {
   private _dir = 'ltr';
 
   /** The offset in pixels for the overlay connection point on the x-axis */
-  private _offsetX: number = 0;
+  private _x: number = 0;
 
   /** The offset in pixels for the overlay connection point on the y-axis */
-  private _offsetY: number = 0;
+  private _y: number = 0;
 
   /** Whether the we're dealing with an RTL context */
   get _isRtl() {
@@ -112,13 +111,13 @@ export class ConnectedPositionStrategy implements PositionStrategy {
 
   /** Sets an offset for the overlay's connection point on the x-axis */
   withOffsetX(offset: number): this {
-    this._offsetX = offset;
+    this._x = offset;
     return this;
   }
 
   /** Sets an offset for the overlay's connection point on the y-axis */
   withOffsetY(offset: number): this {
-    this._offsetY = offset;
+    this._y = offset;
     return this;
   }
 
@@ -196,8 +195,8 @@ export class ConnectedPositionStrategy implements PositionStrategy {
     }
 
     return {
-      x: originPoint.x + overlayStartX + this._offsetX,
-      y: originPoint.y + overlayStartY + this._offsetY
+      x: originPoint.x + overlayStartX + this._x,
+      y: originPoint.y + overlayStartY + this._y
     };
   }
 
@@ -227,18 +226,11 @@ export class ConnectedPositionStrategy implements PositionStrategy {
    * @param overlayPoint
    */
   private _setElementPosition(element: HTMLElement, overlayPoint: Point) {
-    // Round the values to prevent blurry overlays due to subpixel rendering.
-    let x = Math.round(overlayPoint.x);
-    let y = Math.round(overlayPoint.y);
-
-    // TODO(jelbourn): we don't want to always overwrite the transform property here,
-    // because it will need to be used for animations.
-    applyCssTransform(element, `translateX(${x}px) translateY(${y}px)`);
+    element.style.left = overlayPoint.x + 'px';
+    element.style.top = overlayPoint.y + 'px';
   }
 }
 
 
 /** A simple (x, y) coordinate. */
 type Point = {x: number, y: number};
-
-

src/lib/menu/menu-trigger.ts

@@ -24,7 +24,7 @@ import {
     HorizontalConnectionPos,
     VerticalConnectionPos,
 } from '../core';
-import { Subscription } from 'rxjs/Subscription';
+import {Subscription} from 'rxjs/Subscription';
 import {MenuPositionX, MenuPositionY} from './menu-positions';
 
 /**

src/lib/menu/menu.spec.ts

@@ -148,19 +148,19 @@ describe('MdMenu', () => {
 
       fixture.componentInstance.trigger.openMenu();
       fixture.detectChanges();
-      const overlayPane = overlayContainerElement.children[0] as HTMLElement;
+      const overlayPane = getOverlayPane();
       const triggerRect = trigger.getBoundingClientRect();
       const overlayRect = overlayPane.getBoundingClientRect();
 
       // In "before" position, the right sides of the overlay and the origin are aligned.
       // To find the overlay left, subtract the menu width from the origin's right side.
       const expectedLeft = triggerRect.right - overlayRect.width;
-      expect(overlayRect.left)
+      expect(Math.round(overlayRect.left))
           .toBe(Math.round(expectedLeft),
               `Expected menu to open in "before" position if "after" position wouldn't fit.`);
 
       // The y-position of the overlay should be unaffected, as it can already fit vertically
-      expect(overlayRect.top)
+      expect(Math.round(overlayRect.top))
           .toBe(Math.round(triggerRect.top),
               `Expected menu top position to be unchanged if it can fit in the viewport.`);
     });
@@ -177,19 +177,19 @@ describe('MdMenu', () => {
 
       fixture.componentInstance.trigger.openMenu();
       fixture.detectChanges();
-      const overlayPane = overlayContainerElement.children[0] as HTMLElement;
+      const overlayPane = getOverlayPane();
       const triggerRect = trigger.getBoundingClientRect();
       const overlayRect = overlayPane.getBoundingClientRect();
 
       // In "above" position, the bottom edges of the overlay and the origin are aligned.
       // To find the overlay top, subtract the menu height from the origin's bottom edge.
       const expectedTop = triggerRect.bottom - overlayRect.height;
-      expect(overlayRect.top)
+      expect(Math.round(overlayRect.top))
           .toBe(Math.round(expectedTop),
               `Expected menu to open in "above" position if "below" position wouldn't fit.`);
 
       // The x-position of the overlay should be unaffected, as it can already fit horizontally
-      expect(overlayRect.left)
+      expect(Math.round(overlayRect.left))
           .toBe(Math.round(triggerRect.left),
               `Expected menu x position to be unchanged if it can fit in the viewport.`);
     });
@@ -207,18 +207,18 @@ describe('MdMenu', () => {
 
       fixture.componentInstance.trigger.openMenu();
       fixture.detectChanges();
-      const overlayPane = overlayContainerElement.children[0] as HTMLElement;
+      const overlayPane = getOverlayPane();
       const triggerRect = trigger.getBoundingClientRect();
       const overlayRect = overlayPane.getBoundingClientRect();
 
       const expectedLeft = triggerRect.right - overlayRect.width;
       const expectedTop = triggerRect.bottom - overlayRect.height;
 
-      expect(overlayRect.left)
+      expect(Math.round(overlayRect.left))
           .toBe(Math.round(expectedLeft),
               `Expected menu to open in "before" position if "after" position wouldn't fit.`);
 
-      expect(overlayRect.top)
+      expect(Math.round(overlayRect.top))
           .toBe(Math.round(expectedTop),
               `Expected menu to open in "above" position if "below" position wouldn't fit.`);
     });
@@ -230,23 +230,28 @@ describe('MdMenu', () => {
 
       fixture.componentInstance.trigger.openMenu();
       fixture.detectChanges();
-      const overlayPane = overlayContainerElement.children[0] as HTMLElement;
+      const overlayPane = getOverlayPane();
       const triggerRect = trigger.getBoundingClientRect();
       const overlayRect = overlayPane.getBoundingClientRect();
 
       // As designated "before" position won't fit on screen, the menu should fall back
       // to "after" mode, where the left sides of the overlay and trigger are aligned.
-      expect(overlayRect.left)
+      expect(Math.round(overlayRect.left))
           .toBe(Math.round(triggerRect.left),
               `Expected menu to open in "after" position if "before" position wouldn't fit.`);
 
       // As designated "above" position won't fit on screen, the menu should fall back
       // to "below" mode, where the top edges of the overlay and trigger are aligned.
-      expect(overlayRect.top)
+      expect(Math.round(overlayRect.top))
           .toBe(Math.round(triggerRect.top),
               `Expected menu to open in "below" position if "above" position wouldn't fit.`);
     });
 
+    function getOverlayPane(): HTMLElement {
+      let pane = overlayContainerElement.children[0] as HTMLElement;
+      pane.style.position = 'absolute';
+      return pane;
+    }
   });
 
   describe('animations', () => {

src/lib/select/select.spec.ts

@@ -527,6 +527,8 @@ describe('MdSelect', () => {
       fixture.detectChanges();
 
       const overlayPane = overlayContainerElement.children[0] as HTMLElement;
+      overlayPane.style.position = 'absolute';
+
       const overlayRect = overlayPane.getBoundingClientRect();
       const triggerRect = trigger.getBoundingClientRect();