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

[openradar-mirror]

Description

Summary:
In Safari for iOS 8.1, applying display: block; to temporal s, (i.e. s of type="date" , type="time" , type="datetime-local" , or type="month") causes the '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 in each section, which has a display: block; CSS style applied to it,
   has its text aligned to the top of the 's box.
   Compare this to the 2nd in each section,
   which has its default display left at its default value,
   and which has its text vertically centered within the 's box.

Expected Results:
All the 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 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:

• input type date text not vertically centered on iOS twbs/bootstrap#11266
• input type datetime-local text not vertically centered on iOS twbs/bootstrap#13098

Configuration:

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

Product Version: iOS 8.1
Created: 2015-01-10T03:00:52.425225
Originated: 2015-01-09T00:00:00
Open Radar Link: http://www.openradar.me/19434878

[nicolas-ligny]

I noticed this bug on all Android devices using Chrome too.