Skip to content

Commit

Permalink
fix: avoid layout jumping on elements with ripples in RTL
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
crisbeto committed Feb 19, 2018
1 parent 45399c6 commit 9ed4849
Show file tree
Hide file tree
Showing 4 changed files with 0 additions and 11 deletions.
3 changes: 0 additions & 3 deletions src/lib/core/style/_menu-common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
3 changes: 0 additions & 3 deletions src/lib/dialog/dialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
3 changes: 0 additions & 3 deletions src/lib/sidenav/drawer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 0 additions & 2 deletions src/lib/tabs/tab-body.scss
Original file line number Diff line number Diff line change
@@ -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;

Expand Down

0 comments on commit 9ed4849

Please sign in to comment.