fixed troubles with "non-click" on browsers different by Chrome, it has still lot of problems...

Author: FezVrasta

css-compiled/ripples.css

@@ -1,4 +1,4 @@
-/* Generated by less 1.7.0 */
+/* Generated by less 1.7.5 */
 .withripple {
   position: relative;
 }
@@ -21,17 +21,14 @@
   border-radius: 100%;
   background-color: rgba(0, 0, 0, 0.05);
   -webkit-transform: scale(1);
-  -ms-transform: scale(1);
   transform: scale(1);
   -webkit-transform-origin: 50%;
-  -ms-transform-origin: 50%;
   transform-origin: 50%;
   opacity: 0;
+  pointer-events: none;
 }
 .ripple.ripple-on {
   -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-  -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-  -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
   transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
   opacity: 1;
 }

less/ripples.less

@@ -28,6 +28,7 @@
     -ms-transform-origin: 50%;
     transform-origin: 50%;
     opacity: 0;
+    pointer-events: none;
 }
 .ripple.ripple-on {
     -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;

scripts/ripples.js

@@ -1,5 +1,6 @@
 /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
-/* globals CustomEvent, navigator */
+/* globals CustomEvent */
+
 var ripples = {
     init : function(withRipple) {
         "use strict";
@@ -28,7 +29,7 @@ var ripples = {
         var rippleStart = function(e, target) {
 
             // Init variables
-            var $rippleWrapper  = (matchesSelector(target, ".ripple-wrapper")) ? target : target.parentNode,
+            var $rippleWrapper  = target,
                 $el             = $rippleWrapper.parentNode,
                 $ripple         = document.createElement("div"),
                 elPos           = $el.getBoundingClientRect(),
@@ -37,6 +38,8 @@ var ripples = {
                 rippleEnd       = new CustomEvent("rippleEnd", {detail: $ripple}),
                 refreshElementStyle;
 
+            $ripplecache = $ripple;
+
             // Set ripple class
             $ripple.className = "ripple";
 
@@ -56,11 +59,6 @@ var ripples = {
             $ripple.className = "ripple ripple-on";
             $ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
 
-            // Dirty fix for Firefox... seems like absolute elements inside <A> tags do not trigger the "click" event
-            if (/firefox|crios|(^(?!.*chrome).*safari)|ip(ad|hone|od)/i.test(navigator.userAgent)) {
-                $el.click();
-            }
-
             // This function is called when the animation is finished
             setTimeout(function() {
 
@@ -73,6 +71,7 @@ var ripples = {
         };
 
         var rippleOut = function($ripple) {
+            console.log($ripple);
             // Clear previous animation
             $ripple.className = "ripple ripple-on ripple-out";
 
@@ -99,25 +98,29 @@ var ripples = {
                 var $rippleWrapper = document.createElement("div");
                 $rippleWrapper.className = "ripple-wrapper";
                 target.appendChild($rippleWrapper);
-                rippleStart(e, $rippleWrapper);
             }
 
         };
 
+
+        var $ripplecache;
+
         // Events handler
         // init RippleJS and start ripple effect on mousedown
-        bind("mousedown", withRipple, rippleInit);
+        bind("mouseover", withRipple, rippleInit);
 
+        console.log(withRipple);
         // start ripple effect on mousedown
-        bind("mousedown", ".ripple-wrapper, .ripple-wrapper .ripple", rippleStart);
+        bind("mousedown", ".ripple-wrapper", rippleStart);
         // if animation ends and user is not holding mouse then destroy the ripple
-        bind("rippleEnd", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) {
+        bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {
             if (!mouseDown) {
                 rippleOut($ripple);
             }
         });
         // Destroy ripple when mouse is not holded anymore if the ripple still exists
-        bind("mouseup", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) {
+        bind("mouseup", ".ripple-wrapper", function() {
+            var $ripple = $ripplecache;
             if ($ripple.dataset.animating != 1) {
                 rippleOut($ripple);
             }