Bug 139848

Summary: `display: block` makes temporal input values vertically misaligned on iOS
Product: WebKit Reporter: Chris Rebert <webkit>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: benjamin, dbates, eoconnor, hyatt, jhoneycutt, m.kurz+webkitbugs, simon.fraser, wenson_hsieh, zalan
Priority: P2 Keywords: HasReduction, InRadar
Version: Safari 9   
Hardware: iPhone / iPad   
OS: iOS 10   
URL: http://jsbin.com/janaz/4
Bug Depends on:    
Bug Blocks: 159753    
Attachments:
Description Flags
iOS Safari 8.1 screenshot demonstrating the bug
none
Screenshot from Chrome demonstrating correct/expected behavior
none
Copy of JS Bin example none

Description Chris Rebert 2014-12-19 17:05:52 PST
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
Comment 1 Chris Rebert 2014-12-19 17:06:54 PST
Created attachment 243591 [details]
Screenshot from Chrome demonstrating correct/expected behavior
Comment 2 Chris Rebert 2015-01-09 19:02:14 PST
Have also filed this as <rdar://problem/19434878>
Comment 3 Chris Rebert 2015-05-06 21:28:09 PDT
Created attachment 252567 [details]
Copy of JS Bin example
Comment 4 Simon Fraser (smfr) 2017-05-29 08:43:59 PDT
hyatt, did bug 172237 fix this?