Skip to content

Commit c7ab877

Browse files
devversionjelbourn
authored andcommitted
fix(form-field): jumping underline in Edge and Firefox (#8480)
* In Edge and Firefox the underline jumps due to the `transform: perspective`. Also due to the `transform` the underline is getting slightly taller which isn't aligning with the specs. * Improves rendering of the ripple underline by always setting the 2px height. Since the element only uses `1px` if there are form-field errors the height can be adjusted on errors instead of on every focus/blur. Fixes #8395
1 parent 47055a7 commit c7ab877

File tree

1 file changed

+3
-5
lines changed

1 file changed

+3
-5
lines changed

src/lib/form-field/form-field.scss

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -150,8 +150,6 @@ $mat-form-field-default-infix-width: 180px !default;
150150
position: absolute;
151151
height: $mat-form-field-underline-height;
152152
width: 100%;
153-
// Prevents underline from disappearing at lower zoom levels.
154-
transform: perspective(1px);
155153

156154
.mat-form-field-disabled & {
157155
background-position: 0;
@@ -160,17 +158,17 @@ $mat-form-field-default-infix-width: 180px !default;
160158

161159
.mat-form-field-ripple {
162160
position: absolute;
163-
height: $mat-form-field-underline-height;
164161
top: 0;
165162
left: 0;
166163
width: 100%;
164+
height: $mat-form-field-underline-height * 2;
167165
transform-origin: 50%;
168166
transform: scaleX(0.5);
169167
visibility: hidden;
170168
transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;
171169

172-
.mat-focused & {
173-
height: $mat-form-field-underline-height * 2;
170+
.mat-form-field-invalid:not(.mat-focused) & {
171+
height: $mat-form-field-underline-height;
174172
}
175173

176174
.mat-focused &,

0 commit comments

Comments
 (0)