perf(ripple): contain layout, paint and style calculations to ripple container

[crisbeto]

Uses CSS containment to contain the various layout and style calculations to the ripple container since they're independent of the rest of the page.

For reference, here are a couple of examples with and without containment. The top example is without.

[jelbourn]

LGTM

[devversion]

I would consider this a breaking change because people could have changed the overflow or might do something else with the ripple container.

Since matRipple is a directive that can be applied on any element, and is not necessarily applied to an additional element, this might break some people.

[crisbeto]

I see what you mean, but I think that it would be a very narrow (if any) slice of users since they'd also have to have overridden the overflow: hidden at which point the ripple isn't super usable.

[devversion]

That's true. I don't mind seeing how it goes because technically the ripples are not even documented yet. Though if we fully follow the semver concept, this would be breaking.

[jelbourn]

http://www.hyrumslaw.com/

In reality, any change is a breaking change-- we're always making a judgement call to some extent.

[devversion]

Kind of true 😅 , that's why I agreed that it's more unlikely that people might run into issues with that particular change.

[devversion]

Code-wise LGTM. I'm a bit worried about the side-effects that contain might cause, but we'll see.

[jelbourn]

We'll see if there are any issue reports during beta/rc

[crisbeto]

Closing in favor of #17253 since contain isn't supported very well.

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