From c3124d0dadbcc0e616af9b2f23bdf8a96e4076c7 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Tue, 1 Oct 2019 18:54:55 +0200 Subject: [PATCH] perf(ripple): avoid page layouts from ripple elements A while ago we removed the `transform` from the `.mat-ripple` element in order to avoid creating extra layers for elements that the user isn't interacting with. As a result the ripple elements can cause layouts to be triggered on the entire page, which is noticeable on larger pages (see #17252). These changes are a hybrid solution where we add the `transform`, but only if the `.mat-ripple` element has content. This isn't bulletproof since the `:empty` selector can be invalidated by whitespace. For now this is our best solution that works across browsers, until the `contain` property gets better support. Fixes #17252. --- src/material/core/ripple/_ripple.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/material/core/ripple/_ripple.scss b/src/material/core/ripple/_ripple.scss index 3f94c6109f44..6d9a794c943b 100644 --- a/src/material/core/ripple/_ripple.scss +++ b/src/material/core/ripple/_ripple.scss @@ -13,6 +13,15 @@ $mat-ripple-color-opacity: 0.1; // By default, every ripple container should have position: relative in favor of creating an // easy API for developers using the MatRipple directive. position: relative; + + // Promote containers that have ripples to a new layer. We want to target `:not(:empty)`, + // because we don't want all ripple containers to have their own layer since they're used in a + // lot of places and the layer is only relevant while animating. Note that ideally we'd use + // the `contain` property here (see #13175), because `:empty` can be broken by having extra + // text inside the element, but it isn't very well supported yet. + &:not(:empty) { + transform: translateZ(0); + } } .mat-ripple.mat-ripple-unbounded {