From eb29bd7e18024c1a25729c2b98671e295d56d847 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Mon, 17 Sep 2018 23:33:56 +0200 Subject: [PATCH] perf(ripple): contain layout, paint and style calculations to ripple container Uses [CSS containment](https://developer.mozilla.org/en-US/docs/Web/CSS/contain) to contain the various layout and style calculations to the ripple container since they're independent of the rest of the page. --- src/material/core/ripple/_ripple.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/material/core/ripple/_ripple.scss b/src/material/core/ripple/_ripple.scss index 3f94c6109f44..7bad2134ea2f 100644 --- a/src/material/core/ripple/_ripple.scss +++ b/src/material/core/ripple/_ripple.scss @@ -10,12 +10,18 @@ $mat-ripple-color-opacity: 0.1; .mat-ripple { overflow: hidden; + // Limit style recalculations to the ripple container, as much as possible. + contain: strict; + // By default, every ripple container should have position: relative in favor of creating an // easy API for developers using the MatRipple directive. position: relative; } .mat-ripple.mat-ripple-unbounded { + // For unbounded ripples we can't contain `paint`, + // because it stops `overflow` from working. + contain: size layout style; overflow: visible; }