Input field labels appear fuzzy when using md-input container + ng-repeat + placeholder + template variable in placeholder

[a12k]

Actual behavior:

• What is the issue? The combination seems to produce multiple placeholder values superimposed on one another producing a fuzzy look. It seems to happen when:

1. Using a placeholder value,
2. ng-repeat the fields, and
3. there is a template variable in the placeholder (in the demo using {{ $index }} in placeholder)

Removing any of these things causes the behavior to return to normal. This doesn't happen when using a label above the field and no placeholder or when using both a label and placeholder. I came across this behavior when using a button to dynamically add fields with ng-repeat.

CodePen or Steps to reproduce the issue: *

• CodePen Demo which shows your issue : http://codepen.io/a12k/pen/rePGMm
• Details: As you can see, all the field labels look fuzzy. When the field is clicked, one label stays on the field and another which appears to have been superimposed on top animates to above the field.

Looks to be similar to this older issue which was solved: #4462

Additional Information:

• Browser Type: Chrome, Firefox, Internet Explorer 11
• OS: Windows 10
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[crisbeto]

They're not supposed to look like that. We have an open PR to address this at #8291. You can work around this for now by replacing the placeholder attribute with a <label> inside the md-input-container.

[crisbeto]

I'll close the issue since it's a duplicate of #8251.