Skip to content

Commit 1424976

Browse files
committed
address comments
1 parent 0bfbac7 commit 1424976

File tree

1 file changed

+17
-4
lines changed

1 file changed

+17
-4
lines changed

src/lib/input/input-container.scss

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,19 @@ $mat-input-wrapper-padding-bottom:
4242
// Applies a floating placeholder above the input itself.
4343
@mixin mat-input-placeholder-floating {
4444
display: block;
45+
4546
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+
5058
width: 100% / $mat-input-subscript-font-scale;
5159
}
5260

@@ -59,6 +67,7 @@ $mat-input-wrapper-padding-bottom:
5967
// TODO(mmalerba): should this come from typography settings? If so a lot of this CSS needs to go
6068
// into some sort of typography mixin.
6169
line-height: $mat-input-line-height;
70+
font-size: 16px;
6271

6372
// To avoid problems with text-align.
6473
text-align: left;
@@ -213,6 +222,10 @@ $mat-input-wrapper-padding-bottom:
213222
text-overflow: ellipsis;
214223
overflow: hidden;
215224

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+
216229
transform-origin: 0 0;
217230
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
218231
color $swift-ease-out-duration $swift-ease-out-timing-function,

0 commit comments

Comments
 (0)