perf(ripple): avoid page layouts from ripple elements (#17253)

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.

Author: crisbeto

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 {