disabled ripple in buttons are still rendered in the DOM, taking up memory

[AsafAgranat]

Bug, feature request, or proposal:

When using [disableRipple] on mat-button, the ripple effect is indeed disabled, but the ripple DOM element is still rendered. Since the CSS of ripple elements is position: absolute, each ripple instance is elevated to its own layer. Each layer consumes +15KB of memory. This is waste of precious browser memory. Sometimes there is an additional layer created to deal with overlapping elements, taking yet more memory. I exemplify below.

What is the expected behavior?

.mat-ripple elements should not be rendered in the DOM when [disableRipple] is set to true

What is the current behavior?

.mat-ripple elements are rendered in the DOM and consume memory

What are the steps to reproduce?

Set a mat-button to disable ripple effect using [disableRipple]="true". Open Chrome or Safari's devTools and go to Layers panel. Inspect the button and see that its ripple is present, and is elevated to its own layer. See in the bottom panel how much memory that layer consumes.

What is the use-case or motivation for changing an existing behavior?

Improve performance

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material 6.3.3, Angular 6.0.4

Example

I attached example images showing a list of 5 items, each has a button with ripple disabled. 5 x ~20KB is roughly 100KB of browser memory taken for nothing.

Material ripple layers as is

Material ripple layers, with position: absolute removed

[devversion]

We had a related discussion about this in one my PRs. See #8864. There should be a discussion about this before we start going on specific way.

[AsafAgranat]

Events overhead aside, there's also a browser memory overhead, when disabled ripple elements remain in the DOM, as explained above. The short of it is that every ripple elements is painted on it's own DOM layer, bulking up the memory. Therefore ,disabled ripples should at least have their position: absolute changed to position: unset in order to spare the extra layers.

[bsteffl]

Additionally when you use the global config and disable this you still get the visual leftovers of ripple.
See example with slide-toggle below. I noticed this in buttons and radios also.

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

[devversion]

@bsteffl These are the focus indicator ripples which are intentionally showing up if disabled. This is because otherwise there would be no visual indication that such a custom selection-control is focused.

Though it should not show up if users use their mouse. this will be fixed with #13562

[Chiragsorathiya]

I have the same issue as @bsteffl
I only facing on slide toggle not checkbox and radio button

[jelbourn]

Closing this since we don't plan to change the ripple specifically for this. As we continue to align our implementation with MDC, I do expect to see more changes to the ripple rendering, though.

[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.}