diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss index 85ad30a6ab3e..31a88def73c7 100644 --- a/src/lib/input/_input-theme.scss +++ b/src/lib/input/_input-theme.scss @@ -143,11 +143,11 @@ // we need to divide by the scale factor to make it half of the original text size. We again need // to subtract off the line spacing since the mocks measure to the edge of the text, not the edge // of the line. - $subscript-margin-top: 0.5em / $subscript-font-scale - $line-spacing; + $subscript-margin-top: 0.5em / $subscript-font-scale - ($line-spacing * 2); // The padding applied to the input-wrapper to reserve space for the subscript, since it's // absolutely positioned. This is a combination of the subscript's margin and line-height, but we // need to multiply by the subscript font scale factor since the wrapper has a larger font size. - $wrapper-padding-bottom: 0.5em + ($line-height * $subscript-font-scale); + $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale; .mat-input-container { font-family: mat-font-family($config); @@ -193,6 +193,12 @@ } } + // elements seem to have their height set slightly too large on Safari causing the text to + // be misaligned w.r.t. the placeholder. Adding this margin corrects it. + input.mat-input-element { + margin-top: -$line-spacing * 1em; + } + .mat-input-placeholder-wrapper { top: -$infix-margin-top; padding-top: $infix-margin-top; diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss index 48bba215b44f..95bd0d5cae52 100644 --- a/src/lib/input/input-container.scss +++ b/src/lib/input/input-container.scss @@ -77,6 +77,7 @@ $mat-input-underline-height: 1px !default; border: none; outline: none; padding: 0; + margin: 0; width: 100%; // Prevent textareas from being resized outside the container.