iOS Safari: align-items calculates baseline as bottom of input element

ShadowLNC commented 5 years ago

On iOS Safari, align-items uses the bottom of the input element for baseline calculations. iOS versions verified: 10.3, 12.1

Example code

<!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>

57462949_347238195935082_5327405802493837312_n

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.

bradkemper commented 5 years ago

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).

ankedsgn commented 4 years ago

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.. ¯_(ツ)_/¯

Schweinepriester commented 4 years ago

Just had this issue as well.

Seems like an issue has been filed with WebKit: https://bugs.webkit.org/show_bug.cgi?id=142968

vfonic commented 3 years ago

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.

philipwalton / flexbugs

iOS Safari: align-items calculates baseline as bottom of input element #270