Skip to content

Commit c14cf7c

Browse files
crisbetoandrewseguin
authored andcommitted
fix(badge): invalid style declaration and too broad transition (#10433)
* Fixes the badge transition not working due to the `transition` declaration being invalid (no units on the duration). * Fixes the badge animating all properties rather than only the `transform`. * Avoids blurry text in IE.
1 parent 5e5aae3 commit c14cf7c

File tree

1 file changed

+3
-2
lines changed

1 file changed

+3
-2
lines changed

src/lib/badge/_badge-theme.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
131131
text-align: center;
132132
display: inline-block;
133133
border-radius: 50%;
134-
transition: all 0.2 ease-in-out;
134+
transition: transform 200ms ease-in-out;
135135
transform: scale(0.6);
136136
overflow: hidden;
137137
white-space: nowrap;
@@ -142,7 +142,8 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
142142
// The active class is added after the element is added
143143
// so it can animate scale to default
144144
.mat-badge-content.mat-badge-active {
145-
transform: scale(1);
145+
// Scale to `none` instead of `1` to avoid blurry text in some browsers.
146+
transform: none;
146147
}
147148

148149
.mat-badge-small {

0 commit comments

Comments
 (0)