Bug 139848 – `display: block` makes temporal input values vertically misaligned on iOS

• Status: NEW
• Component: CSS

[Chris Rebert]

Created attachment 243590 [details]
iOS Safari 8.1 screenshot demonstrating the bug

This bug affects Safari for iOS 8.1.
OS X Safari isn't affected.

In Safari for iOS 8.1, applying `display: block;` to temporal <input>s,
(i.e. <input>s of type="date" , type="time" , type="datetime-local" , or type="month")
causes the <input>'s value text to become vertically top-aligned instead of vertically centered.
This does not match the behavior of other browsers
(specifically: OS X Firefox, OS X Chrome, and OS X Safari).


To reproduce:
1. Open http://jsbin.com/janaz/4 in iOS Safari
2. Observe that the 1st <input> in each section, which has a `display: block;` CSS style applied to it,
     has its text aligned to the top of the <input>'s box.
     Compare this to the 2nd <input> in each section,
     which has its default `display` left at its default value,
     and which has its text vertically centered within the <input>'s box.

Expected behavior:
All the <input>s in the example should have their text vertically centered.
See 2nd attached screenshot (taken in Chrome) that shows the correct behavior.
Firefox and OS X Safari behave the same as Chrome.

Original Bootstrap bug reports:
* https://github.com/twbs/bootstrap/issues/11266
* https://github.com/twbs/bootstrap/issues/13098

Bootstrap currently has to include WebKit-specific overrides to workaround this bug:
https://github.com/twbs/bootstrap/blob/46e059e9d72b09479fe6b4c6e25d273d4ed0f3cf/less/forms.less#L168

[Chris Rebert]

Created attachment 243591 [details]
Screenshot from Chrome demonstrating correct/expected behavior

[Chris Rebert]

Have also filed this as <rdar://problem/19434878>

[Chris Rebert]

Created attachment 252567 [details]
Copy of JS Bin example

[Simon Fraser (smfr)]

hyatt, did bug 172237 fix this?

Can you please fix this?

We have an input datetime-local with display: inline-block; and it looks awful on Safari.

The text (date and time) is small and aligned to the top of the input, instead of being vertically centered.

All other browsers like Chrome and Firefox display the input properly.