@@ -42,11 +42,19 @@ $mat-input-wrapper-padding-bottom:
42
42
// Applies a floating placeholder above the input itself.
43
43
@mixin mat-input-placeholder-floating {
44
44
display : block ;
45
+
45
46
transform : translateY (- $mat-input-infix-margin-top - $mat-input-infix-padding )
46
- // fixes text blurriness, see
47
- // https://css-tricks.com/forums/topic/transforms-cause-font-smoothing-weirdness-in-webkit/
48
- perspective (1px )
49
- scale ($mat-input-subscript-font-scale );
47
+ scale ($mat-input-subscript-font-scale )
48
+ // We use perspecitve to fix the text blurriness as described here:
49
+ // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
50
+ // This results in a small jitter after the label floats on Firefox, which the
51
+ // translateZ fixes.
52
+ perspective (1px ) translateZ (0.001px );
53
+ // The tricks above used to smooth out the animation on chrome and firefox actually make things
54
+ // worse on IE, so we don't include them in the IE version.
55
+ -ms-transform : translateY (- $mat-input-infix-margin-top - $mat-input-infix-padding )
56
+ scale ($mat-input-subscript-font-scale );
57
+
50
58
width : 100% / $mat-input-subscript-font-scale ;
51
59
}
52
60
@@ -59,6 +67,7 @@ $mat-input-wrapper-padding-bottom:
59
67
// TODO(mmalerba): should this come from typography settings? If so a lot of this CSS needs to go
60
68
// into some sort of typography mixin.
61
69
line-height : $mat-input-line-height ;
70
+ font-size : 16px ;
62
71
63
72
// To avoid problems with text-align.
64
73
text-align : left ;
@@ -213,6 +222,10 @@ $mat-input-wrapper-padding-bottom:
213
222
text-overflow : ellipsis ;
214
223
overflow : hidden ;
215
224
225
+ // The perspective helps smooth out animations on Chrome and Firefox but isn't needed on IE.
226
+ transform : perspective (1px );
227
+ -ms-transform : none ;
228
+
216
229
transform-origin : 0 0 ;
217
230
transition : transform $swift-ease-out-duration $swift-ease-out-timing-function ,
218
231
color $swift-ease-out-duration $swift-ease-out-timing-function ,
0 commit comments