fix(button): fixes ripple on fab buttons in safari

Closes #1856
angular · Mar 23, 2015 · 82dc0c2 · 82dc0c2
1 parent 4fa14e1
commit 82dc0c2
Showing 1 changed file with 3 additions and 2 deletions.
diff --git 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);