[Webkit-unassigned] [Bug 139848] New: `display: block` makes temporal input values vertically misaligned on iOS

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Fri Dec 19 17:05:52 PST 2014


https://bugs.webkit.org/show_bug.cgi?id=139848

            Bug ID: 139848
           Summary: `display: block` makes temporal input values
                    vertically misaligned on iOS
    Classification: Unclassified
           Product: WebKit
           Version: 528+ (Nightly build)
          Hardware: iOS
                OS: iOS 8.1
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: webkit at rebertia.com

Created attachment 243590
  --> https://bugs.webkit.org/attachment.cgi?id=243590&action=review
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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20141220/8559e38a/attachment-0002.html>


More information about the webkit-unassigned mailing list