From 82dc0c2786bf7f65f4e1b13842630296b83f643b Mon Sep 17 00:00:00 2001
From: Robert Messerle <rmesserle@google.com>
Date: Thu, 19 Mar 2015 11:15:08 -0700
Subject: [PATCH] fix(button): fixes ripple on fab buttons in safari

Closes #1856
---
 src/components/button/button.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index c40ab5db757..36cab7a0381 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -96,11 +96,12 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
     width: $button-fab-width;
     height: $button-fab-height;
 
-    border-radius: 50%;
-
     @extend .md-shadow-bottom-z-1;
     border-radius: 50%;
+    background-clip: padding-box;
     overflow: hidden;
+    // The following hack causes Safari to respect overflow hidden for ripples
+    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
 
     transform: translate3d(0,0,0);