Bug 139848

Summary:

`display: block` makes temporal input values vertically misaligned on iOS

Product:

WebKit

Reporter:

Chris Rebert <webkit>

Component:

CSS

Assignee:

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:

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

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.