fix(ink): ink correctly radiates from under click on safari

 - use CSS class names like angular/material to make cross browser support easier.
 - animate class names in, wait and then remove them.
 - use input position in px rather than %

ng2-material/core/style/structure.scss

@@ -1,3 +1,5 @@
+@import 'variables';
+
 html, body {
   height: 100%;
   color: rgba(0,0,0,0.87);
@@ -111,10 +113,42 @@ input {
   height: 100%;
 }
 
+/*
+ * A container inside of a rippling element (eg a button),
+ * which contains all of the individual ripples
+ */
+.md-ripple-container {
+  pointer-events: none;
+  position: absolute;
+  overflow: hidden;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  transition: all 0.55s $swift-ease-out-timing-function;
+}
+
 .md-ripple {
-  position: relative;
+  position: absolute;
+  transform: translate(-50%, -50%) scale(0);
+  transform-origin: 50% 50%;
   opacity: 0;
   border-radius: 50%;
+  &.md-ripple-placed {
+    $sizeDuration: 0.45s * 2;
+    transition: margin $sizeDuration $swift-ease-out-timing-function,
+                border $sizeDuration $swift-ease-out-timing-function,
+                width $sizeDuration $swift-ease-out-timing-function,
+                height $sizeDuration $swift-ease-out-timing-function,
+                opacity $sizeDuration $swift-ease-out-timing-function,
+                transform $sizeDuration $swift-ease-out-timing-function;
+  }
+  &.md-ripple-scaled {
+    transform: translate(-50%, -50%) scale(1);
+  }
+  &.md-ripple-active, &.md-ripple-full, &.md-ripple-visible {
+    opacity: 0.20;
+  }
 }
 
 .md-padding {

ng2-material/core/util/animate.ts

@@ -71,6 +71,9 @@ export class Animate {
         continue;
       }
       duration = ( duration.indexOf('ms') > -1 ) ? parseFloat(duration) : parseFloat(duration) * 1000;
+      if (duration === 0) {
+        continue;
+      }
       if (includeDelay) {
         let delayProperty = (i === 0 ? '' : `-${prefixes[i]}-`) + `transition-delay`;
         var delay = style[delayProperty];
@@ -117,6 +120,9 @@ export class Animate {
         if (saveDuration !== -1) {
           Animate.setTransitionDuration(element, saveDuration);
         }
+        else {
+          DOM.removeStyle(element, 'transition-duration');
+        }
         animResolve();
       };
       let removeListener = DOM.onAndCancel(element, Animate.TRANSITION_EVENT, done);
@@ -140,8 +146,24 @@ export class Animate {
       if (saveDuration !== -1) {
         Animate.setTransitionDuration(element, saveDuration);
       }
+      else {
+        DOM.removeStyle(element, 'transition-duration');
+      }
       resolve();
     });
   }
 
+
+  /**
+   * Wait a period of time, then resolve a promise.
+   * @param milliseconds The period to wait before resolving.
+   * @returns {Promise<void>|Promise} A promise that resolves after a period of time.
+   */
+  static wait(milliseconds: number = 10): Promise<void> {
+    return new Promise<void>((resolve)=> {
+      TimerWrapper.setTimeout(() => resolve(), milliseconds);
+    });
+  }
+
+
 }

ng2-material/core/util/ink.ts

@@ -34,50 +34,45 @@ export class Ink {
    * Apply an ink ripple to an element at the given position.
    *
    * @param element The element to apply a ripple to
-   * @param x The x position inside the element for the ripple to originate from
-   * @param y The y position inside the element for the ripple to originate from
+   * @param left The x position inside the element for the ripple to originate from
+   * @param top The y position inside the element for the ripple to originate from
    * @returns {Promise<any>} A promise that resolves when the ripple has faded
    */
-  static ripple(element: HTMLElement, x: number, y: number): Promise<any> {
+  static ripple(element: HTMLElement, left: number, top: number): Promise<any> {
     let fit: boolean = isPresent(DOM.getAttribute(element, 'md-fab'));
 
-    let container = DOM.createElement('div');
-    DOM.addClass(container, 'md-ripple-container');
+    let container = DOM.querySelector(element, '.md-ripple-container');
+    if (!container) {
+      container = DOM.createElement('div');
+      DOM.addClass(container, 'md-ripple-container');
+      DOM.appendChild(element, container);
+    }
 
     let ripple = DOM.createElement('div');
     DOM.addClass(ripple, 'md-ripple');
-    DOM.appendChild(container, ripple);
-
-    DOM.appendChild(element, container);
 
-    let getHostSize = () => {
-      let elX = element.offsetWidth;
-      let elY = element.offsetHeight;
-      return Ink.getSize(fit, elX, elY);
-    };
     let getInitialStyles = (): any => {
-      let size = getHostSize();
       let color = DOM.getComputedStyle(element).color || 'rgb(0,0,0)';
+      let size = Ink.getSize(fit, element.clientWidth, element.clientHeight);
       return {
         'background-color': color,
-        left: `${x - size / 2}px`,
-        top: `${y - size / 2}px`,
+        left: `${left}px`,
+        top: `${top}px`,
         width: `${size}px`,
-        height: `${size}px`,
-        opacity: 0.2,
-        transform: 'scale(0.01)'
+        height: `${size}px`
       };
     };
 
     return Animate.setStyles(ripple, getInitialStyles())
-      .then(() => Animate.animateStyles(ripple, {
-        left: '50%',
-        top: '50%',
-        opacity: 0.1,
-        transform: 'translate(-50%, -50%) scale(1)'
-      }, 450))
-      .then(() => Animate.animateStyles(ripple, {opacity: 0}, 650))
-      .then(() => DOM.removeChild(element, container));
+      .then(() => DOM.appendChild(container, ripple))
+      .then(() => DOM.addClass(ripple, 'md-ripple-placed'))
+      .then(() => Animate.wait())
+      .then(() => DOM.addClass(ripple, 'md-ripple-scaled'))
+      .then(() => DOM.addClass(ripple, 'md-ripple-active'))
+      .then(() => Animate.wait(450))
+      .then(() => DOM.removeClass(ripple, 'md-ripple-active'))
+      .then(() => Animate.wait(650))
+      .then(() => DOM.removeChild(container, ripple));
   }
 
   /**