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: 2024-03-31 22:34 PDT (History)
16 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?
Comment 8 collimarco91 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.