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

Originator:cvrebert
Number:rdar://19434878 Date Originated:09-Jan-2015
Status:Open Resolved:
Product:Safari Product Version:iOS 8.1
Classification:UI/Usability Reproducible:Always
 
Summary:
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).

Steps 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 Results:
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.

Actual Results:
All the <input>s in the example should have their text vertically top-aligned.

Version:
iOS 8.1

Notes:
Firefox and OS X Safari behave the same as Chrome.

WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=139848

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

Configuration:


Attachments:
'safaribug.png' and 'correct_chrome.png' were successfully uploaded.

Comments


Please note: Reports posted here will not necessarily be seen by Apple. All problems should be submitted at bugreport.apple.com before they are posted here. Please only post information for Radars that you have filed yourself, and please do not include Apple confidential information in your posts. Thank you!