diff --git a/src/lib/sidenav/drawer.html b/src/lib/sidenav/drawer.html
new file mode 100644
index 00000000000..3ff215408cf
--- /dev/null
+++ b/src/lib/sidenav/drawer.html
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/lib/sidenav/drawer.scss b/src/lib/sidenav/drawer.scss
index aff6489f6f6..c0630553573 100644
--- a/src/lib/sidenav/drawer.scss
+++ b/src/lib/sidenav/drawer.scss
@@ -162,6 +162,17 @@ $mat-drawer-over-drawer-z-index: 4;
}
}
+// Note that this div isn't strictly necessary on all browsers, however we need it in
+// order to avoid a layout issue in Chrome. The issue is that in RTL mode the browser doesn't
+// account for the sidenav's scrollbar while positioning, which ends up pushing it partially
+// out of the screen. We work around the issue by having the scrollbar be on this inner container.
+.mat-drawer-inner-container {
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+}
+
.mat-sidenav-fixed {
position: fixed;
}
diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts
index 3c77a501bad..ebb6a7907df 100644
--- a/src/lib/sidenav/drawer.ts
+++ b/src/lib/sidenav/drawer.ts
@@ -103,7 +103,7 @@ export class MatDrawerContent extends CdkScrollable implements AfterContentInit
moduleId: module.id,
selector: 'mat-drawer',
exportAs: 'matDrawer',
- template: '',
+ templateUrl: 'drawer.html',
animations: [matDrawerAnimations.transformDrawer],
host: {
'class': 'mat-drawer',
diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts
index 74f8ef3a94c..28f47becbb5 100644
--- a/src/lib/sidenav/sidenav.ts
+++ b/src/lib/sidenav/sidenav.ts
@@ -54,7 +54,7 @@ export class MatSidenavContent extends MatDrawerContent {
moduleId: module.id,
selector: 'mat-sidenav',
exportAs: 'matSidenav',
- template: '',
+ templateUrl: 'drawer.html',
animations: [matDrawerAnimations.transformDrawer],
host: {
'class': 'mat-drawer mat-sidenav',