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).
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.
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:
Bootstrap currently has to include WebKit-specific overrides to workaround this bug:
Created attachment 243591 [details]
Screenshot from Chrome demonstrating correct/expected behavior
Have also filed this as <rdar://problem/19434878>
Created attachment 252567 [details]
Copy of JS Bin example
hyatt, did bug 172237 fix this?