fix: Ripples on IE 11

Author: rstoenescu

dev/components/css/material-ripples.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="docs-ripple row justify-center">
+    <div style="width: 500px; max-width: 90vw;">
+      <p class="caption">
+        <span class="desktop-only">Click</span>
+        <span class="mobile-only">Tap</span>
+        on the area below to see it in action.
+      </p>
+
+      <div
+        v-ripple
+        class="relative-position ripple-example shadow-2"
+        :class="classes"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+const colors = ['primary', 'amber', 'secondary', 'orange', 'tertiary', 'lime', 'cyan', 'purple', 'brown', 'blue']
+
+export default {
+  data () {
+    return {
+      color: colors[0],
+      index: 0
+    }
+  },
+  computed: {
+    classes () {
+      return `bg-${this.color}`
+    }
+  },
+  mounted () {
+    this.timer = setInterval(() => {
+      this.index = (this.index + 1) % colors.length
+      this.color = colors[this.index]
+    }, 3000)
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+  }
+}
+</script>
+
+<style lang="stylus">
+.ripple-example
+  height 150px
+  border-radius 3px
+  cursor pointer
+  color white
+  transition background 1.5s
+</style>

src/css/core/ripples.styl

@@ -1,35 +1,35 @@
 .q-ripple
 
   &-container
-    color inherit
-    border-radius inherit
-    position absolute
-    left 0
     top 0
+    left 0
     width 100%
     height 100%
+    position absolute
+    color inherit
+    border-radius inherit
     overflow hidden
     z-index 0
     pointer-events none
 
   &-animation
-    color inherit
-    position absolute
     top 0
     left 0 /* rtl:ignore */
+    opacity 0
+    color inherit
+    position absolute
     border-radius 50%
     background currentColor
-    opacity 0
-    transition .5s transform cubic-bezier(.2, .4, .4, .9), .3s opacity cubic-bezier(.2, .4, .4, .1)
+    transition .3s transform cubic-bezier(.2, .4, .4, .9), .3s opacity cubic-bezier(.2, .4, .4, .1)
     pointer-events none
     overflow hidden
-    will-change opacity
+    will-change transform, opacity
 
     &-enter
       transition none
 
     &-visible
-      opacity .3
+      opacity .15
 
 .q-radial-ripple
   overflow hidden

src/directives/ripple.js

@@ -8,43 +8,43 @@ function showRipple (evt, el, stopPropagation) {
 
   let
     container = document.createElement('span'),
-    animNode = document.createElement('span')
+    animNode = document.createElement('span'),
+    size = el.clientWidth > el.clientHeight ? el.clientWidth : el.clientHeight,
+    unit = `${size * 2}px`
 
   container.appendChild(animNode)
   container.className = 'q-ripple-container'
-
-  let size = el.clientWidth > el.clientHeight ? el.clientWidth : el.clientHeight
-  size = `${size * 2}px`
   animNode.className = 'q-ripple-animation'
-  css(animNode, { width: size, height: size })
+  animNode.style.width = unit
+  animNode.style.height = unit
 
   el.appendChild(container)
 
   const
     offset = el.getBoundingClientRect(),
     pos = position(evt),
-    x = pos.left - offset.left,
-    y = pos.top - offset.top
+    x = pos.left - offset.left - size,
+    y = pos.top - offset.top - size
 
-  animNode.classList.add('q-ripple-animation-enter', 'q-ripple-animation-visible')
-  css(animNode, cssTransform(`translate(-50%, -50%) translate(${x}px, ${y}px) scale(.001)`))
+  animNode.classList.add('q-ripple-animation-enter')
+  animNode.classList.add('q-ripple-animation-visible')
+  css(animNode, cssTransform(`translate(${x}px, ${y}px) scale3d(0, 0, 0)`))
 
   setTimeout(() => {
     animNode.classList.remove('q-ripple-animation-enter')
-    css(animNode, cssTransform(`translate(-50%, -50%) translate(${x}px, ${y}px)`))
+    css(animNode, cssTransform(`translate(${x}px, ${y}px) scale3d(1, 1, 1)`))
     setTimeout(() => {
       animNode.classList.remove('q-ripple-animation-visible')
       setTimeout(() => {
-        const el = animNode.parentNode
-        if (el && el.parentNode) {
-          el.parentNode.removeChild(el)
+        if (container.parentNode) {
+          el.removeChild(container)
         }
       }, 300)
-    }, 400)
-  }, 25)
+    }, 300)
+  }, 0)
 }
 
-function shouldAbort ({mat, ios}) {
+function shouldAbort ({ mat, ios }) {
   return (
     (mat && process.env.THEME !== 'mat') ||
     (ios && process.env.THEME !== 'ios')