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
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?