Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

fix(button): fix rendering issue with borders and webkit browsers #9449

Merged
merged 1 commit into from
Feb 9, 2018
Merged

fix(button): fix rendering issue with borders and webkit browsers #9449

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 5 additions & 17 deletions src/components/button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -177,11 +163,13 @@ button.md-button::-moz-focus-inner {
}

.md-ripple-container {
border-radius: $button-border-radius;
border-radius: inherit;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we inherit? we want it to always be 50%

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

border-radius isn't the shape of the ripple, it's the border limit to which the ripple will reach on its container. See #9154

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, if they use md-cornered, then it shouldn't be 50%, it should be 0.

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);
}
}

Expand Down