Bug 142968

Summary: [Flexbox] align-items: baseline on empty input element causes alignment to bottom of element
Product: WebKit Reporter: Michael Bailey <bugzilla>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bart, brkemper, caleb, idmadj, jfernandez, levdmitriy, lizmitchell, m.gamper, nicolas, openers-dream.0r, rizadh, rniwa, svillar, webkit-bug-importer, webkit
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on:    
Bug Blocks: 91512    
Attachments:
Description Flags
Safari flexbox alignment bug none

Michael Bailey
Reported 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.)
Attachments
Safari flexbox alignment bug (24.87 KB, image/png)
2023-09-11 14:42 PDT, Gilmar Lira 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Michael Bailey
Comment 1 2015-03-23 09:23:18 PDT
See also http://crbug.com/401185 for the Blink issue. Firefox renders the testcase correctly.
Michael Bailey
Comment 2 2015-03-23 09:26:21 PDT
Also possibly related: https://bugs.webkit.org/show_bug.cgi?id=35787
Brad
Comment 3 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).
Sam Sneddon [:gsnedders]
Comment 4 2022-02-25 10:36:34 PST
<rdar://50068184>
idmadj
Comment 5 2022-09-21 16:19:05 PDT
Can confirm this is still an issue in Safari 15.2
Mathias Gamper
Comment 6 2023-03-28 23:57:39 PDT
Can confirm this is still an issue in Safari 16.4 released these days.
Gilmar Lira
Comment 7 2023-09-11 14:42:24 PDT
Created attachment 467648 [details] Safari flexbox alignment bug This is a frequent topic on our design systems team. We implemented a default placeholder text of one space character, so Safari can math correctly. Engineers bring it up often as they stumble upon our patch. Problem is real and I am not aware of other alternatives.
nicolas
Comment 8 2023-12-08 06:33:52 PST
I'm able to reproduce the problem with a placeholder, after entering text and then removing it. Each time the content is completely removed, the alignment is at bottom. It's weird, it behaves like the font baseline information is lost when the last character is removed, even though the placeholder is displayed. <div style="display: flex; align-items: baseline"> <span>aligned baseline ? </span> <input value="" style="vertical-align: baseline" placeholder="should be !"> </div>
bart
Comment 9 2024-06-23 23:33:34 PDT
I too have been able to reproduce this issue when a placeholder is visible.
Mathias Gamper
Comment 10 2025-02-12 23:53:24 PST
It is still an issue in Safari 18.3. Which is a bit frustrating for a 10 year old bug report. BTW; happy Birthday.
Note You need to log in before you can comment on or make changes to this bug.