Firefox md-input placeholder text doesn't appear above user input

[dozingcat]

• Do you want to request a feature or report a bug?
  Bug
• What is the current behavior?
  Run the demo app in Firefox, or go to https://material2-app.firebaseapp.com/ . Click on a text field with placeholder text. The placeholder text will turn blue but remain in the same place. Start typing and the placeholder text will disappear entirely.
• What is the expected behavior?
  Chrome behaves correctly; when the text field becomes focused, the placeholder text should animate above the entered text.
• Which version of Angular and Material, and which browser and OS does this issue affect?
  Behavior is identical in Firefox 45 on Mac OS X 10.11, Windows 10, and Android. Running against material2 head.
• Other information
  Commenting out the "input:-webkit-autofill + .md-input-placeholder" selector in input.scss (https://github.com/angular/material2/blob/master/src/components/input/input.scss#L140) makes Firefox work as expected. Apparently Firefox believes "input:-webkit-autofill" is invalid CSS and won't apply any selectors that contain it.

[davidgabrichidze]

One option is to split webkit-autofill and other selectors from each other. This will duplicate several lines of css, but will work for firefox, without affecting chrome/safari autofill behavior.

e.g. rendered css which works as expected
`[_nghost-dxv-12] .md-input-placeholder.md-float:not(.md-empty), [_nghost-dxv-12] .md-input-placeholder.md-float.md-focused, [_nghost-dxv-12] .md-input-placeholder {
visibility: visible;
padding-bottom: 5px;
-webkit-transform: translateY(-100%) scale(0.75);
transform: translateY(-100%) scale(0.75); }
[_nghost-dxv-12] .md-input-placeholder.md-float:not(.md-empty) .md-placeholder-required, [_nghost-dxv-12] .md-input-placeholder.md-float.md-focused .md-placeholder-required, [_nghost-dxv-12] .md-input-placeholder .md-placeholder-required {
color: #9c27b0; }

[_nghost-dxv-12] input:-webkit-autofill + .md-input-placeholder {
visibility: visible;
padding-bottom: 5px;
-webkit-transform: translateY(-100%) scale(0.75);
transform: translateY(-100%) scale(0.75); }
[_nghost-dxv-12] input:-webkit-autofill + .md-input-placeholder .md-placeholder-required {
color: #9c27b0; }`

[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.}