Bug 142968 - [Flexbox] align-items: baseline on empty input element causes alignment to bottom of element
Summary: [Flexbox] align-items: baseline on empty input element causes alignment to bo...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Depends on:
Blocks: 91512
  Show dependency treegraph
Reported: 2015-03-23 09:17 PDT by Michael Bailey
Modified: 2020-07-07 02:21 PDT (History)
5 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Michael Bailey 2015-03-23 09:17:50 PDT
In a flex container with a text child (such as a label) and an <input type=“text”> child, baseline alignment works as expected only if the input element has a value specified. If the input element has no value, the sibling text element will be aligned to the bottom of the text input widget, rather than where its text baseline would be.

Testcase: http://codepen.io/anon/pen/EaraKp

(The testcase uses the unprefixed syntax, but the issue is the same whether using r181845 with no prefixes, or the shipping Safari 8.0.4 (10600.4.10.7) with prefixes.)
Comment 1 Michael Bailey 2015-03-23 09:23:18 PDT
See also http://crbug.com/401185 for the Blink issue. Firefox renders the testcase correctly.
Comment 2 Michael Bailey 2015-03-23 09:26:21 PDT
Also possibly related: https://bugs.webkit.org/show_bug.cgi?id=35787
Comment 3 Brad 2019-09-23 13:39:19 PDT
This is still a big problem in Safari 13. 

If there is text or a placeholder in the field, it isn't an issue. Only when the field is completely blank (you can enter text into it and the tab out to see the alignment jump). A placeholder of a non-breaking space kind of works, but it still doesn't align as well as an actual letter (baseline on a space seem to be different).