datepicker: case where date and placeholder overlap in IE and FF

[ghost]

Actual Behavior:

• What is the issue? *

If $mdDateLocaleProvider.formatDate is configured with special Date-Format,
the initial state of the component is not proper in IE and FF.

• What is the expected behavior?

Date should not be visible

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:

https://jsbin.com/dimudiw/5/edit?html,js,output

• Details:

Angular Versions: *

• Angular Version: 1.5.11
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: * IE, FF
• Browser Version: * ie 11, ff 51.0.1
• OS: * Windows
• Stack Traces: no errors

[busiq]

It seems like it's not really a problem with Datepicker, but with md-input-container instead, take a look here: https://jsbin.com/zilisazade/edit?html,js,output - 2nd input (not nested inside md-input-container) displays date in every browser, and after small research I found this issue #1409.

So it looks like for some reason FF/IE isn't handling this CSS rule properly - https://github.com/angular/material/blob/master/src/components/input/input.scss#L151, but everything works as expected if you divide this rule into 2 chunks (let's say general & webkit specified), just like that:

&:not( .md-input-has-value ) input:not( :focus ) {
  color: transparent;
}

&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-ampm-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-day-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-hour-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-millisecond-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-minute-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-month-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-second-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-week-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-year-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-text {
  color: transparent;
}

But I'm not sure if that's a good solution.

[0xemc]

I'm not sure if this is still an issue for others but I found this solution worked in both chrome and firefox

input:not( :focus ) { color: transparent; } input:valid { color: inherit; }

[Splaktar]

PR #11538 opened to fix this.