flexbugs
flexbugs copied to clipboard
philipwalton
iOS Safari: align-items calculates baseline as bottom of input element
On iOS Safari, align-items uses the bottom of the input element for baseline calculations.
iOS versions verified: 10.3, 12.1
<!DOCTYPE html><html><head>
<title>CSS Flex Bug</title>
<style>
.test {
display: flex;
align-items: baseline;
}
</style>
</head><body>
<div class="test">
<label style="background-color:green;">tEST</label>
<input type="text" style="padding:1em;">
</div>
<div class="test">
<label style="background-color:yellow;">tEST</label>
<div><input type="text" style="padding:1em;"></div>
</div>
</body></html>
The first example (and second example in screenshot) aligns the label baseline with the bottom of the input element.
The correct behaviour only occurs for the last example (with a parent div).
This also applies for textarea elements.
A workaround is shown in the demo - in short, wrap your input tag in a parent div. Unfortunately CSS selectors will need to be reworked appropriately. Edit: This workaround has limited success but does work for basic inputs. I'm still searching for other workarounds for textarea elements, etc.
Wrapping in another element didn't help me (I wrapped in a span). What does make a difference is if there is text or a placeholder in the field (you can enter text into it and the tab out to see the alignment jump). I placeholder of a non-breaking space kind of works, but it still doesn't align as well as an actual letter (metrics seem to be different).
Yes, came upon the exact same issue and would love to see it fixed. Thank you for the suggestion with the placeholder hack! Silly, but it works.. ¯_(ツ)_/¯
Just had this issue as well.
Seems like an issue has been filed with WebKit: https://bugs.webkit.org/show_bug.cgi?id=142968
The same issue is still present on desktop Safari 14.1.1 (latest stable release as of 4 June 2021.)
I fixed this by specifying: placeholder=" " on all input fields where I wanted to leave the empty input field.
