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;