Date input text not vertically aligned in IE 11

[carbonrobot]

The "Special styles for iOS temporal inputs" in forms.less creates an issue with IE11 where date inputs misalign the text vertically until the user places the cursor inside the input. See http://jsbin.com/foqex/2 for reference. IE8+ was corrected in #12669

[cvrebert]

Was presumably fixed by 5713bd7.

[carbonrobot]

IE11 is ignoring the ~"/0" and using the line height of the control. IE8-10 fixed by 5713bd7

[cvrebert]

Confirmed that input[type="date"].form-control is broken in IE11 (tested w/ http://jsfiddle.net/cvrhulu/VeLQn/ ).
CC: @mdo

Does this qualify as a browser bug in IE11?

[carbonrobot]

Possible solution, but very ugly

// forms.less
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"] {
     line-height: @line-height-base;
   }
}

[cvrebert]

There's also this IE11+ CSS hack: http://browserhacks.com/#hack-d19e53a0fdfba5ec0f283ae86175a3af

[carbonrobot]

Using that IE11+ hack, works correctly:

// IE 11 hack to reverse the iOS temporal input hack
_:-ms-fullscreen, :root input[type="date"],
_:-ms-fullscreen, :root input[type="time"],
_:-ms-fullscreen, :root input[type="datetime-local"],
_:-ms-fullscreen, :root input[type="month"] {
    line-height: @line-height-base;

    &.input-sm {
        line-height: @input-height-small;
    }
    &.input-lg {
        line-height: @input-height-large;
    }
}

[mdo]

Lol, so wait, we have to hack IE8-10, and then unhack it for IE11? Holy hell, that sucks.

[mdo]

Neither of those hacks seem to solve it for me.

[mdo]

Nevermind, I'm a dingus and overlooked the code snippet above—the other values needed to begin with @line- as well. All set in http://jsbin.com/tuwoti/2/.

[cvrebert]

@mdo If I'm understanding correctly, IE11 is behaving differently from the other modern browsers here, which probably means it has a bug that we ought to report?

[mdo]

Possibly? Have we reported any other bugs for IE yet?

[cvrebert]

@mdo Yup: #14211 (comment)

[cvrebert]

Reopening to remind us to file an IE11 bug.

[mdo]

Thinking about it more, I'm not really sure there is a bug for IE11 here. We're using CSS hacks to target IE 8-10, but I'm guessing that gets applied to IE11, too.

[carbonrobot]

If IE 11 should be ignoring "\0", then its a bug. If "\0" is valid, then it's not a bug, only a problem with the hack were using to correct issues with IE 8 - 10. I wonder if using the full "\0/" would work better?

[mdo]

The change to the hack has no effect on IE11—the problem still exists.

[carasmo]

Just wondering why you can't just remove the IOS temporal inputs and put them, without the IE \0 hack into a webkit media query hack, it doesn't bug out in IE 11 and Chrome doesn't look crappy either.

SEE: http://jsfiddle.net/s97j14y3/1/

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"] {
        line-height: 34px
    }
    input[type="date"].input-sm,
    input[type="time"].input-sm,
    input[type="datetime-local"].input-sm,
    input[type="month"].input-sm {
        line-height: 30px
    }
    input[type="date"].input-lg,
    input[type="time"].input-lg,
    input[type="datetime-local"].input-lg,
    input[type="month"].input-lg {
        line-height: 46px
    }
}

[carasmo]

Just saw the comment in the less file. Nice verb usage. ; - )

[mdo]

@carasmo Nice! For some reason I was so hooked on it being IE that I didn't think about the original problem and how we could scope that. Thanks! Fix forthcoming.

[carbonrobot]

@carasmo Nice fix, good focus