diff --git a/src/components/button/button.scss b/src/components/button/button.scss index 7c54d42831..bd90640443 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -115,13 +115,6 @@ button.md-button::-moz-focus-inner { padding: $baseline-grid; width: $icon-button-width; border-radius: $button-icon-border-radius; - .md-ripple-container { - border-radius: $button-icon-border-radius; - background-clip: padding-box; - overflow: hidden; - // The following hack causes Safari/Chrome to respect overflow hidden for ripples - -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC'); - } } &.md-fab { @@ -145,13 +138,6 @@ button.md-button::-moz-focus-inner { transition: $swift-ease-in; transition-property: background-color, box-shadow, transform; - .md-ripple-container { - border-radius: $button-fab-border-radius; - background-clip: padding-box; - overflow: hidden; - // The following hack causes Safari/Chrome to respect overflow hidden for ripples - -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC'); - } &.md-mini { line-height: $button-fab-mini-line-height; @@ -177,11 +163,13 @@ button.md-button::-moz-focus-inner { } .md-ripple-container { - border-radius: $button-border-radius; + border-radius: inherit; background-clip: padding-box; overflow: hidden; - // The following hack causes Safari/Chrome to respect overflow hidden for ripples - -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC'); + + // Workaround for rounded corner overflow bug + // Force Safari and Chrome to use a compositing layer + -webkit-transform:translateZ(0); } }