[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