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: 57cpquat, akeerthi, ap, benapfiel, benjamin, collimarco91, dbates, eoconnor, hyatt, jhoneycutt, karlcow, m.kurz+webkitbugs, simon.fraser, socialprompt, wenson_hsieh, zalan
Priority: P2 Keywords: HasReduction, InRadar
Version: Safari 9   
Hardware: iPhone / iPad   
OS: iOS 10   
URL: http://jsbin.com/janaz/4
See Also: https://bugs.webkit.org/show_bug.cgi?id=236352
https://github.com/webcompat/web-bugs/issues/112819
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

Chris Rebert
Reported 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
Attachments
iOS Safari 8.1 screenshot demonstrating the bug (175.50 KB, image/png)
2014-12-19 17:05 PST, Chris Rebert 		no flags
Details
Screenshot from Chrome demonstrating correct/expected behavior (20.04 KB, image/png)
2014-12-19 17:06 PST, Chris Rebert 		no flags
Details
Copy of JS Bin example (918 bytes, text/html)
2015-05-06 21:28 PDT, Chris Rebert 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Chris Rebert
Comment 1 2014-12-19 17:06:54 PST
Created attachment 243591 [details] Screenshot from Chrome demonstrating correct/expected behavior
Chris Rebert
Comment 2 2015-01-09 19:02:14 PST
Have also filed this as <rdar://problem/19434878>
Chris Rebert
Comment 3 2015-05-06 21:28:09 PDT
Created attachment 252567 [details] Copy of JS Bin example
Simon Fraser (smfr)
Comment 4 2017-05-29 08:43:59 PDT
hyatt, did bug 172237 fix this?
collimarco91
Comment 8 2023-08-30 02:52:11 PDT
Can you please fix this? We have an input datetime-local with display: inline-block; and it looks awful on Safari. The text (date and time) is small and aligned to the top of the input, instead of being vertically centered. All other browsers like Chrome and Firefox display the input properly.
Note You need to log in before you can comment on or make changes to this bug.