From 4e605e91358f36d382fe380d90a7c82e106fbc69 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Wed, 6 Sep 2017 23:37:22 +0200
Subject: [PATCH] perf(dialog): avoid repaintin dialog content element on
 scroll

Fixes the `<md-dialog-content>` element being repainted on scroll.

Fixes #6878.
---
 src/lib/core/style/_vendor-prefixes.scss | 5 +++++
 src/lib/dialog/dialog.scss               | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/src/lib/core/style/_vendor-prefixes.scss b/src/lib/core/style/_vendor-prefixes.scss
index d49e9af4f485..0eaf254033ec 100644
--- a/src/lib/core/style/_vendor-prefixes.scss
+++ b/src/lib/core/style/_vendor-prefixes.scss
@@ -33,4 +33,9 @@
   cursor: -webkit-grabbing;
   cursor: grabbing;
 }
+
+@mixin backface-visibility($value) {
+  -webkit-backface-visibility: $value;
+  backface-visibility: $value;
+}
 /* stylelint-enable */
diff --git a/src/lib/dialog/dialog.scss b/src/lib/dialog/dialog.scss
index ab09312d4aeb..8ef8eea9df4c 100644
--- a/src/lib/dialog/dialog.scss
+++ b/src/lib/dialog/dialog.scss
@@ -1,4 +1,5 @@
 @import '../core/style/elevation';
+@import '../core/style/vendor-prefixes';
 @import '../core/a11y/a11y';
 
 
@@ -35,6 +36,9 @@ $mat-dialog-button-margin: 8px !default;
   max-height: $mat-dialog-max-height;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
+
+  // Promote the content to a new GPU layer to avoid repaints on scroll.
+  @include backface-visibility(hidden);
 }
 
 .mat-dialog-title {