MD WebUI: create a Chrome-only <paper-ripple> that's resistant to JS jank (via web animations API)

third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html

Index: third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html
diff --git a/third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html b/third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html
index 1a8e66bc499cf53b4a4a24ffe7c1c71c86efc460..30aade71510f515dadaf7f90ab64cf2d9e39025e 100644
--- a/third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html
+++ b/third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html
@@ -77,73 +77,31 @@ Apply `circle` class to make the rippling effect within a circle.
   <template>
     <style>
       :host {
-        display: block;
-        position: absolute;
         border-radius: inherit;
-        overflow: hidden;
-        top: 0;
-        left: 0;
-        right: 0;
         bottom: 0;
-
-        /* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers,
-         * creating a node (with a position:absolute) in the middle of an event
-         * handler "interrupts" that event handler (which happens when the
-         * ripple is created on demand) */
-        pointer-events: none;
-      }
-
-      :host([animating]) {
-        /* This resolves a rendering issue in Chrome (as of 40) where the
-           ripple is not properly clipped by its parent (which may have
-           rounded corners). See: http://jsbin.com/temexa/4
-
-           Note: We only apply this style conditionally. Otherwise, the browser
-           will create a new compositing layer for every ripple element on the
-           page, and that would be bad. */
-        -webkit-transform: translate(0, 0);
-        transform: translate3d(0, 0, 0);
-      }
-
-      #background,
-      #waves,
-      .wave-container,
-      .wave {
+        display: block;
+        left: 0;
+        overflow: hidden;
         pointer-events: none;
         position: absolute;
+        right: 0;
         top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
-
-      #background,
-      .wave {
-        opacity: 0;
-      }
-
-      #waves,
-      .wave {
-        overflow: hidden;
+        transform: translate3d(0, 0, 0);  /* for rounded corners */

[dpapad, 2017/02/22 21:07:26]

Isn't translate3d(0,0,0) a no-op? I guess I am not understanding the comment
here.

[Dan Beam, 2017/02/23 00:23:43]

copied the URL from the original paper-ripple implementation (that you can refer
to on the left of the diff)

       }
 
-      .wave-container,
-      .wave {
-        border-radius: 50%;
+      .ripple {
+        background-color: currentcolor;
+        opacity: .25;
+        pointer-events: none;
+        position: absolute;
+        will-change: height, transform, width;
       }
 
-      :host(.circle) #background,
-      :host(.circle) #waves {
+      .ripple,
+      :host(.circle) {
         border-radius: 50%;
       }
-
-      :host(.circle) .wave-container {
-        overflow: hidden;
-      }
     </style>
-
-    <div id="background"></div>
-    <div id="waves"></div>
   </template>
 </dom-module>
-<script src="paper-ripple-extracted.js"></script></body></html>
+<script src="paper-ripple-extracted.js"></script></body></html>