Skip to content
This repository has been archived by the owner on Jan 19, 2024. It is now read-only.

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

Open
ShadowLNC opened this issue Apr 20, 2019 · 4 comments
Open

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

ShadowLNC opened this issue Apr 20, 2019 · 4 comments

Comments

@ShadowLNC
Copy link

ShadowLNC commented Apr 20, 2019 •
edited

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
Copy link

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
Copy link

ankedsgn commented May 7, 2020

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
Copy link

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
Copy link

vfonic commented Jun 4, 2021

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.

@frederike-ramin frederike-ramin mentioned this issue Jul 27, 2021
Merged
@JulianRoesner JulianRoesner mentioned this issue Aug 6, 2021
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@vfonic @Schweinepriester @ankedsgn @ShadowLNC @bradkemper