Performance issue when using many mat-button-toggle-group components

[Alin764]

Reproduction

https://stackblitz.com/edit/angular-cacnzk

I have a HTML table containing 250 rows
Each row has a mat-button-toggle-group with 5 options + another two mat-select components

When I toggle a button in the first rows of the table I’m having a significant delay. The delay is decreasing if move to the bottom of the page

Also, If I change from mat-button-toggle-group to mat-radio-group I don’t have these performance issue.

Steps to reproduce:

1. toggle a button in the first row of the table
2. toggle a button the last row of the table
3. comment mat-button-toggle-group tag and enable mat-radio-group tag
4. repeat steps 1 and 2 ( there is no delay when using mat-radio-group )

Expected Behavior

Similar performance as mat-radio-group

Actual Behavior

There is significant delay when using mat-button-toggle-group instead of mat-radio-group

Environment

• Angular: 8.0.0
• CDK/Material: 8.2.1
• Browser(s): Chrome Version 77.0.3865.90 (Official Build)
• Operating System: Windows

[Alin764]

@crisbeto , is there an easy way that I can add this fix into my existing solution. I tried to add the css part which was modified, but is not working.

[crisbeto]

You should be able to just apply the same styles in your app. If you're doing it from inside a view-encapsulated component it might not be reaching the ripple elements though.

[Alin764]

Thanks, it worked by adding this in my styles.scss

.mat-ripple { overflow: hidden; position: relative; &:not(:empty) { transform: translateZ(0); } }

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}