Summary: | [Flexbox] align-items: baseline on empty input element causes alignment to bottom of element | ||||||
---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Michael Bailey <bugzilla> | ||||
Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||
Status: | NEW --- | ||||||
Severity: | Normal | CC: | 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
Michael Bailey
2015-03-23 09:17:50 PDT
See also http://crbug.com/401185 for the Blink issue. Firefox renders the testcase correctly. Also possibly related: https://bugs.webkit.org/show_bug.cgi?id=35787 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). Can confirm this is still an issue in Safari 15.2 Can confirm this is still an issue in Safari 16.4 released these days. 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.
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> |