CODEWITHSUNDEEP
htmlcsssafari
Wintermilch
Wintermilch

Reputation: 93

Safari sets fixed width for span elements with text

Using Safari 18.3 (20620.2.4.11.5) and noticed a weird behaviour or possibly a bug.

I have this HTML input which can contain special characters (see red dot):

HTML Input with special chars

To display the special characters, I'm overlaying the whole input with span elements. This just means the .input-representation is absolutely positioned above the input:

<div class="input">
    <span class="input-representation">
            <span>m</span>
            <span>y</span>
            <span class="spacer"> </span>
            <span class="spacer"> </span>
            <span class="spacer"> </span>
            <span class="red-cherry special">◵</span>
            <span class="spacer"> </span>
            <span class="spacer"> </span>
            <span>t</span>
            <span>e</span>
            <span>x</span>
            <span>t</span>
    </span>
    <input 
        type="text"
        tabindex="-1"
        class="input-field"
        maxlength="61"/>
</div>

Now in Chrome, Firefox, Edge both desktop and mobile the span elements all take up the width of their letter. Safari on the other hand sets a fixed size for each letter which displaces everything a bit.

Example with the y character in Chrome: example y character width in chrome

Example with the y character in Safari: example y character width in safari

The only CSS-Styles applied to the elements are the font-family and font-size.

Changing the font-family or width: fit-content don't seem to do anything. I've also switched out the span with p tags but that didn't help either.

Upvotes: 0

Views: 47

Answers (1)

Wintermilch
Wintermilch

Reputation: 93

Solution: In Safari the font-family was set to monospace and in other browsers it was another. If I use monospace in browsers other than Safari, I get the same results with fixed character widths.

Upvotes: 0

Related Questions