fix(input): fix input/placeholder alignment on safari (#6072)

Author: mmalerba

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 @@
     }
   }
 
+  // <input> 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;

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.