Skip to content

Commit fe1b31c

Browse files
crisbetoandrewseguin
authored andcommitted
fix(material/form-field): flickering when hovering invalid input on chrome (#21620)
Fixes some flickering in all adjacent form fields that happens when a specific form field is in its invalid state and the user hovers over it. Fixes #21612. (cherry picked from commit ac121f8)
1 parent 75367e7 commit fe1b31c

File tree

1 file changed

+3
-1
lines changed

1 file changed

+3
-1
lines changed

src/material/form-field/form-field.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,9 @@ $mat-form-field-default-infix-width: 180px !default;
184184
.mat-form-field.mat-form-field-invalid {
185185
.mat-form-field-ripple {
186186
opacity: 1;
187-
transform: scaleX(1);
187+
// Note that we transition this to `none`, rather than `scaleX(1)`, because the scaling
188+
// seems to cause some rendering artifacts on adjacent form fields (see #21612).
189+
transform: none;
188190
transition: transform 300ms $swift-ease-out-timing-function,
189191
opacity 100ms $swift-ease-out-timing-function,
190192
background-color 300ms $swift-ease-out-timing-function;

0 commit comments

Comments
 (0)