diff --git a/UI/WebServerResources/js/Common/sgRippleClick.directive.js b/UI/WebServerResources/js/Common/sgRippleClick.directive.js
index eb1327880..a695615ff 100644
--- a/UI/WebServerResources/js/Common/sgRippleClick.directive.js
+++ b/UI/WebServerResources/js/Common/sgRippleClick.directive.js
@@ -70,27 +70,42 @@
         element.on('click', listener);
         
         function listener(event) {
+          var coordinates;
+
           if (element[0].hasAttribute('disabled')) {
             return;
           }
 
+          if (event.pageX && event.pageY) {
+            // Event is a mouse click
+            coordinates = { left: event.pageX, top: event.pageY };
+          }
+          else {
+            // Event is a form submit; target is the submit button
+            coordinates = event.target.getBoundingClientRect();
+          }
+
           if (content.classList.contains('ng-hide')) {
             // Show ripple
             angular.element(container).css({ 'overflow': 'hidden' });
-            content.classList.remove('ng-hide');
             angular.element(content).css({ top: container.scrollTop + 'px' });
-            ripple.css({
-	      'top': (event.pageY - container.offsetTop + container.scrollTop) + 'px',
-	      'left': (event.pageX - container.offsetLeft) + 'px',
-	      'width': '400vmin',
-	      'height': '400vmin'
-	    });
+            $timeout(function() {
+              // Wait until next digest for CSS animation to work
+              ripple.css({
+	        'top': (coordinates.top - container.offsetTop + container.scrollTop) + 'px',
+	        'left': (coordinates.left - container.offsetLeft) + 'px',
+	        'height': '400vmin',
+	        'width': '400vmin'
+	      });
+              // Show ripple content
+              content.classList.remove('ng-hide');
+            });
           }
           else {
             // Hide ripple layer
             ripple.css({
-              'top': (event.pageY - container.offsetTop + container.scrollTop) + 'px',
-	      'left': (event.pageX - container.offsetLeft) + 'px',
+              'top': (coordinates.top - container.offsetTop + container.scrollTop) + 'px',
+	      'left': (coordinates.left - container.offsetLeft) + 'px',
               'height': '0px',
               'width': '0px'
             });
diff --git a/UI/WebServerResources/scss/components/ripple/ripple.scss b/UI/WebServerResources/scss/components/ripple/ripple.scss
index 2e47c956d..0801095fd 100644
--- a/UI/WebServerResources/scss/components/ripple/ripple.scss
+++ b/UI/WebServerResources/scss/components/ripple/ripple.scss
@@ -5,10 +5,10 @@ sg-ripple {
   height: 0px;
   width: 0px;
   position: absolute;
-  transition: width 800ms linear, height 800ms linear, background-color 400ms linear;
+  transition: width 800ms linear, height 800ms linear, background-color 400ms linear 200ms;
   transform: translate(-50%, -50%);
   opacity: 1;
-  z-index: $z-index-toolbar + 1;
+  z-index: $z-index-scroll-mask;
 }
 
 sg-ripple-content {
@@ -17,5 +17,5 @@ sg-ripple-content {
   position: absolute;
   right: 0;
   top: 0;
-  z-index: $z-index-toolbar + 2;
+  z-index: $z-index-scroll-mask + 1;
 }
\ No newline at end of file