fix: avoid layout jumping on elements with ripples in RTL #10026
Conversation
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.
crisbeto
requested review from
andrewseguin,
jelbourn and
mmalerba
as code owners
googlebot
added
the
cla: yes
| @@ -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. | |||
There was a problem hiding this comment.
I'm also open to keeping these and scoping them to something like &:not([dir='rtl']), but it could end up causing inconsistencies.
|
Have we filed a bug against chrome for this? It seems like a bug |
|
How big is the difference with and without the |
|
@jelbourn In terms of scrolling performance it promotes the element to a new GPU layer so it gets repainted less, however I haven't felt a noticeable difference when playing around with it. |
jelbourn
added
pr: lgtm
action: merge
) 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.
) 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.
|
The bug still exists (Angular Material v6.4.5, Chrome v68). |
|
@eimanip you can solve most of the jumping by setting the |
* Fixes the content of the sidenav jumping around in RTL if it has active animations. * Fixes text inside the sidenav being blurry on IE and Edge. Relates to angular#10026.
|
@crisbeto Thanks for your response. Hope this issue will be fixed. |
* Fixes the content of the sidenav jumping around in RTL if it has active animations. * Fixes text inside the sidenav being blurry on IE and Edge. Relates to #10026.
* Fixes the content of the sidenav jumping around in RTL if it has active animations. * Fixes text inside the sidenav being blurry on IE and Edge. Relates to #10026.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
A while ago we added a
backface-visibilityto 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 thebackface-visibilityin order to avoid the jumping, until we can find a better solution.Relates to #10023.
A couple of examples of the issue:
