fix(sidenav): switches to translate3d() for content positioning (#484)

* fix(sidenav): overflow should be set to auto rather than scroll

* fix(sidenav): switches to `translate3d()` for content positioning

Author: robertmesserle

src/components/sidenav/sidenav-transitions.scss

@@ -5,15 +5,14 @@
 
 
 :host {
-  & > .md-sidenav-backdrop {
+  > .md-sidenav-backdrop {
     &.md-sidenav-shown {
       transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function;
     }
   }
 
-  & > md-content {
-    transition: left $swift-ease-out-duration $swift-ease-out-timing-function,
-                right $swift-ease-out-duration $swift-ease-out-timing-function;
+  > md-content {
+    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
   }
 
   > md-sidenav {

src/components/sidenav/sidenav.html

@@ -3,9 +3,6 @@
 
 <ng-content select="md-sidenav"></ng-content>
 
-<md-content [style.margin-left.px]="getMarginLeft()"
-            [style.margin-right.px]="getMarginRight()"
-            [style.left.px]="getPositionLeft()"
-            [style.right.px]="getPositionRight()">
+<md-content [ngStyle]="getStyles()">
   <ng-content></ng-content>
 </md-content>

src/components/sidenav/sidenav.scss

@@ -12,12 +12,12 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
 
 
 /**
- * Mixin to help with defining LTR/RTL 'transform: translateX()' values.
+ * Mixin to help with defining LTR/RTL 'transform: translate3d()' values.
  * @param $open The translation value when the sidenav is opened.
  * @param $close The translation value when the sidenav is closed.
  */
 @mixin md-sidenav-transition($open, $close) {
-  transform: translateX($close);
+  transform: translate3d($close, 0, 0);
 
   &.md-sidenav-closed {
     // We use 'visibility: hidden | visible' because 'display: none' will not animate any
@@ -27,18 +27,18 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
     visibility: hidden;
   }
   &.md-sidenav-closing {
-    transform: translateX($close);
+    transform: translate3d($close, 0, 0);
     will-change: transform;
   }
   &.md-sidenav-opening {
     @include md-elevation(1);
     visibility: visible;
-    transform: translateX($open);
+    transform: translate3d($open, 0, 0);
     will-change: transform;
   }
   &.md-sidenav-opened {
     @include md-elevation(1);
-    transform: translateX($open);
+    transform: translate3d($open, 0, 0);
   }
 }
 
@@ -60,7 +60,7 @@ $md-sidenav-push-background-color: md-color($md-background, dialog) !default;
   @include md-stacking-context();
 
   box-sizing: border-box;
-  overflow-y: scroll;
+  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 
   // TODO(hansl): Update this with a more robust solution.

src/components/sidenav/sidenav.ts

@@ -371,6 +371,29 @@ export class MdSidenavLayout implements AfterContentInit {
   getPositionRight() {
     return this._getSidenavEffectiveWidth(this._right, 'push');
   }
+
+  /**
+   * Returns the horizontal offset for the content area.  There should never be a value for both
+   * left and right, so by subtracting the right value from the left value, we should always get
+   * the appropriate offset.
+   * @internal
+   */
+  getPositionOffset() {
+    return this.getPositionLeft() - this.getPositionRight();
+  }
+
+  /**
+   * This is using [ngStyle] rather than separate [style...] properties because [style.transform]
+   * doesn't seem to work right now.
+   * @internal
+   */
+  getStyles() {
+    return {
+      marginLeft: `${this.getMarginLeft()}px`,
+      marginRight: `${this.getMarginRight()}px`,
+      transform: `translate3d(${this.getPositionOffset()}px, 0, 0)`
+    };
+  }
 }