From 27c29a2dfcc0eeca933f9174a2aa791f527f2e2a Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Mon, 19 Feb 2018 19:30:18 +0100
Subject: [PATCH] fix: avoid layout jumping on elements with ripples in RTL
A while ago we added a `backface-visibility` to some components that have scrollable content in order to avoid repaints while scrolling (see #7889, #7721, #7719, #6890, #2156) which worked at the time, however in the more recent versions of Chrome it causes the content in RTL mode to shift whenever a child has a transform that is being animated (in our case it's usually ripples). These changes revert the `backface-visibility` in order to avoid the jumping, until we can find a better solution.
Relates to #10023.
---
src/lib/core/style/_menu-common.scss | 3 ---
src/lib/dialog/dialog.scss | 3 ---
src/lib/sidenav/drawer.scss | 3 ---
src/lib/tabs/tab-body.scss | 2 --
4 files changed, 11 deletions(-)
diff --git a/src/lib/core/style/_menu-common.scss b/src/lib/core/style/_menu-common.scss
index 109893922801..b789240824c9 100644
--- a/src/lib/core/style/_menu-common.scss
+++ b/src/lib/core/style/_menu-common.scss
@@ -17,9 +17,6 @@ $mat-menu-icon-margin: 16px !default;
@mixin mat-menu-base($default-elevation) {
@include mat-overridable-elevation($default-elevation);
- // Prevents the content from repainting on scroll.
- @include backface-visibility(hidden);
-
min-width: $mat-menu-overlay-min-width;
max-width: $mat-menu-overlay-max-width;
overflow: auto;
diff --git a/src/lib/dialog/dialog.scss b/src/lib/dialog/dialog.scss
index 4a72cc903a01..2604ef84653a 100644
--- a/src/lib/dialog/dialog.scss
+++ b/src/lib/dialog/dialog.scss
@@ -34,9 +34,6 @@ $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 {
diff --git a/src/lib/sidenav/drawer.scss b/src/lib/sidenav/drawer.scss
index 2c9ffcf1c8e5..271478fd3313 100644
--- a/src/lib/sidenav/drawer.scss
+++ b/src/lib/sidenav/drawer.scss
@@ -80,9 +80,6 @@ $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;
diff --git a/src/lib/tabs/tab-body.scss b/src/lib/tabs/tab-body.scss
index 1b32d6be6154..63daba18ea1a 100644
--- a/src/lib/tabs/tab-body.scss
+++ b/src/lib/tabs/tab-body.scss
@@ -1,8 +1,6 @@
@import '../core/style/vendor-prefixes';
.mat-tab-body-content {
- // Avoids repainting while scrolling.
- @include backface-visibility(hidden);
height: 100%;
overflow: auto;