Bug 139848 - `display: block` makes temporal input values vertically misaligned on iOS
Summary: `display: block` makes temporal input values vertically misaligned on iOS
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 9
Hardware: iPhone / iPad iOS 10
: P2 Normal
Assignee: Nobody
URL: http://jsbin.com/janaz/4
Keywords: HasReduction, InRadar
Depends on:
Blocks: 159753
  Show dependency treegraph
 
Reported: 2014-12-19 17:05 PST by Chris Rebert
Modified: 2018-07-03 11:02 PDT (History)
9 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
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?