perf(dialog): avoid repaintin dialog content element on scroll

Fixes the `<md-dialog-content>` element being repainted on scroll. Fixes #6878.
angular · Sep 7, 2017 · 4e605e9 · 4e605e9
1 parent bef6271
commit 4e605e9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git 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
@@ -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 {