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

Closes #1856
angular · Mar 19, 2015 · a1c011e · mckenzielong · Mar 19, 2015 · robertmesserle
1 parent 66fe575
commit a1c011e
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -97,11 +97,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);