From 131e98f2eab3a9505605e2c275c6e7b95dea677a Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 12 Oct 2017 07:21:01 +0200
Subject: [PATCH] perf(drawer): drawer content repainting on scroll (#7719)

Prevents the drawer content from repainting while scrolling.

Relates to #7716.
---
 src/lib/sidenav/drawer.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/lib/sidenav/drawer.scss b/src/lib/sidenav/drawer.scss
index c9a944b2ea16..290e0098d5a8 100644
--- a/src/lib/sidenav/drawer.scss
+++ b/src/lib/sidenav/drawer.scss
@@ -1,6 +1,7 @@
 @import '../core/style/variables';
 @import '../core/style/elevation';
 @import '../core/style/layout-common';
+@import '../core/style/vendor-prefixes';
 @import '../../cdk/a11y/a11y';
 
 $mat-drawer-content-z-index: 1;
@@ -79,6 +80,9 @@ $mat-drawer-over-drawer-z-index: 4;
 }
 
 .mat-drawer-content {
+  // `backface-visibility` prevents the element from repainting on scroll. This is the
+  // equivalent of using `translateZ(0)`, but it doesn't create a new stacking context.
+  @include backface-visibility(hidden);
   @include mat-drawer-stacking-context($mat-drawer-content-z-index);
 
   display: block;