Skip to content

Commit f58d1b4

Browse files
committed
perf(dialog): avoid repaintin dialog content element on scroll
Fixes the `<md-dialog-content>` element being repainted on scroll. Fixes #6878.
1 parent bef6271 commit f58d1b4

File tree

2 files changed

+9
-0
lines changed

2 files changed

+9
-0
lines changed

src/lib/core/style/_vendor-prefixes.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,9 @@
3333
cursor: -webkit-grabbing;
3434
cursor: grabbing;
3535
}
36+
37+
@mixin backface-visibility($value) {
38+
-webkit-backface-visibility: $value;
39+
backface-visibility: $value;
40+
}
3641
/* stylelint-enable */

src/lib/dialog/dialog.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import '../core/style/elevation';
22
@import '../core/a11y/a11y';
3+
@import '../core/a11y/vendor-prefixes';
34

45

56
$mat-dialog-padding: 24px !default;
@@ -35,6 +36,9 @@ $mat-dialog-button-margin: 8px !default;
3536
max-height: $mat-dialog-max-height;
3637
overflow: auto;
3738
-webkit-overflow-scrolling: touch;
39+
40+
// Promote the content to a new GPU layer to avoid repaints on scroll.
41+
@include backface-visibility($hidden);
3842
}
3943

4044
.mat-dialog-title {

0 commit comments

Comments
 (0)