Skip to content

Commit 26f9e50

Browse files
crisbetovictoriaaa234
authored andcommitted
fix(ripple): remove webkit touch highlights from ripple containers (#12082)
Since the ripples are feedback enough that the element was touched, we should disable the native feedback on touch devices so it doesn't overlap with the ripples. These changes go through the various clickable ripple triggers and remove the Webkit highlighting.
1 parent 695b973 commit 26f9e50

File tree

6 files changed

+6
-0
lines changed

6 files changed

+6
-0
lines changed

src/lib/button-toggle/button-toggle.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ $mat-button-toggle-border-radius: 2px !default;
4242
.mat-button-toggle {
4343
white-space: nowrap;
4444
position: relative;
45+
-webkit-tap-highlight-color: transparent;
4546

4647
// Similar to components like the checkbox, slide-toggle and radio, we cannot show the focus
4748
// overlay for `.cdk-program-focused` because mouse clicks on the <label> element would be always

src/lib/chips/chips.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ $mat-chip-remove-size: 18px;
2424
position: relative;
2525
overflow: hidden;
2626
box-sizing: border-box;
27+
-webkit-tap-highlight-color: transparent;
2728
}
2829

2930
.mat-standard-chip {

src/lib/core/option/option.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
max-width: 100%;
1414
box-sizing: border-box;
1515
align-items: center;
16+
-webkit-tap-highlight-color: transparent;
1617

1718
&[aria-disabled='true'] {
1819
@include user-select(none);

src/lib/list/list.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ $mat-list-item-inset-divider-offset: 72px;
4141
// being `inline` by default.
4242
display: block;
4343
height: $base-height;
44+
-webkit-tap-highlight-color: transparent;
4445

4546
.mat-list-item-content {
4647
display: flex;

src/lib/stepper/step-header.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ $mat-step-header-icon-size: 16px !default;
1414
cursor: pointer;
1515
position: relative;
1616
box-sizing: content-box;
17+
-webkit-tap-highlight-color: transparent;
1718
}
1819

1920
.mat-step-optional {

src/lib/tabs/tab-nav-bar/tab-nav-bar.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
text-decoration: none; // Removes anchor underline styling
1919
position: relative;
2020
overflow: hidden; // Keeps the ripple from extending outside the element bounds
21+
-webkit-tap-highlight-color: transparent;
2122

2223
[mat-stretch-tabs] & {
2324
flex-basis: 0;

0 commit comments

Comments
 (0)