floatPlaceholder="never" misaligned on Safari (macOS)

[leocaseiro]

Bug, feature request, or proposal:

CSS Bug

What is the expected behavior?

Placeholder should be aligned in the same position as the text like on Chrome/Firefox:

Chrome

What is the current behavior?

Safari

What are the steps to reproduce?

Any app should emulate. My example is with devapp

• gulp serve:devapp
• go to http://localhost:4200/input
• Enable "Never Float"

or

<md-input-container floatPlaceholder="never">
  <input mdInput name="filter" type="text" placeholder="Filter">
</md-input-container>

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/*: 4.2.2
@angular/material: 2.0.0-beta.6
typescript: 2.3.4

Safari: Version 10.1.1 (12603.2.4)

Chrome: Version 58.0.3029.110 (64-bit) (working)
Firefox: 53.0.3 (64-bit) (working)

Is there anything else we should know?

Works on Firefox and Chrome (tested on macOS only)

[mmalerba]

Possibly related to #5262, will check after #5154 is merged

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}