diff --git a/css-compiled/ripples.css b/css-compiled/ripples.css
index a3c19300..05124b30 100644
--- a/css-compiled/ripples.css
+++ b/css-compiled/ripples.css
@@ -29,14 +29,18 @@
   opacity: 0;
 }
 .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;
+  visibility: visible;
   opacity: 1;
+  -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
+  -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
+  -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
+  transition: opacity 0.15s ease-in 0s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
 }
 .ripple.ripple-out {
-  -webkit-transition: opacity 0.1s linear 0s !important;
-  transition: opacity 0.1s linear 0s !important;
+  visibility: hidden;
   opacity: 0;
+  -webkit-transition: visibility 0s 0.1s, opacity 0.1s linear !important;
+  -ms-transition: opacity 0s 0.1s, opacity 0.1s linear !important;
+  -moz-transition: visibility 0s 0.1s, opacity 0.1s linear !important;
+  transition: visibility 0s 0.1s, opacity 0.1s linear !important;
 }
diff --git a/less/ripples.less b/less/ripples.less
index 5f22f1d7..cda32706 100644
--- a/less/ripples.less
+++ b/less/ripples.less
@@ -30,14 +30,18 @@
     opacity: 0;
 }
 .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;
+	visibility: visible;
+	opacity: 1;
+    -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
+    -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
+    -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
+    transition: opacity 0.15s ease-in 0s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;    
 }
 .ripple.ripple-out {
-    -webkit-transition: opacity 0.1s linear 0s !important;
-    transition: opacity 0.1s linear 0s !important;
-    opacity: 0;
+	visibility: hidden;
+	opacity: 0;
+	-webkit-transition: visibility 0s 0.1s, opacity 0.1s linear !important;
+	-ms-transition: opacity 0s 0.1s, opacity 0.1s linear !important;
+    -moz-transition: visibility 0s 0.1s, opacity 0.1s linear !important;
+    transition: visibility 0s 0.1s, opacity 0.1s linear !important;    
 }
diff --git a/scripts/ripples.js b/scripts/ripples.js
index 6be4ce47..db98a974 100644
--- a/scripts/ripples.js
+++ b/scripts/ripples.js
@@ -12,7 +12,7 @@ var ripples = {
 
         // animations time
         var rippleOutTime = 100,
-            rippleStartTime = 500;
+            rippleStartTime = 400;
 
         // Helper to bind events on dynamically created elements
         var bind = function(event, selector, callback) {
@@ -35,7 +35,7 @@ var ripples = {
                 mousePos        = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
                 scale           = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
                 rippleEnd       = new CustomEvent("rippleEnd", {detail: $ripple}),
-                refreshElementStyle;
+                refreshElementStyle;            
 
             // Set ripple class
             $ripple.className = "ripple";
@@ -58,7 +58,10 @@ var ripples = {
 
             // 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();
+            	var button = e.which || e.button;
+    			if (button == 1) {
+    				$el.click();
+    			}                
             }
 
             // This function is called when the animation is finished
@@ -78,7 +81,7 @@ var ripples = {
 
             // Let ripple fade out (with CSS)
             setTimeout(function() {
-                $ripple.remove();
+                $ripple.remove();                
             }, rippleOutTime);
         };
 
@@ -107,16 +110,15 @@ var ripples = {
         // Events handler
         // init RippleJS and start ripple effect on mousedown
         bind("mousedown", withRipple, rippleInit);
-
         // start ripple effect on mousedown
         bind("mousedown", ".ripple-wrapper, .ripple-wrapper .ripple", rippleStart);
         // if animation ends and user is not holding mouse then destroy the ripple
         bind("rippleEnd", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) {
-            if (!mouseDown) {
+            if (!mouseDown || !$($ripple).is(":first-child")) {
                 rippleOut($ripple);
             }
         });
-        // Destroy ripple when mouse is not holded anymore if the ripple still exists
+        // Destroy ripple when mouse is not held anymore if the ripple still exists
         bind("mouseup", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) {
             if ($ripple.dataset.animating != 1) {
                 rippleOut($ripple);