fix: avoid layout jumping on elements with ripples in RTL (angular#10026

)

A while ago we added a `backface-visibility` to some components that have scrollable content in order to avoid repaints while scrolling (see angular#7889, angular#7721, angular#7719, angular#6890, angular#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 angular#10023.

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;

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 {

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;

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;