There's something strange happening in Safari that I can't quite figure out.
Here's how my layout looks in Chrome:
https://i.sstatic.net/lPhnP.png
But when viewed in Safari, it looks like this:
https://i.sstatic.net/IMnQb.png
For some reason, the
<small class="text-muted">(required)</small>Even stranger, if I change just one letter in the word 'City', everything goes back to normal.
Here's the same section of my form with only one letter changed from 'City' to 'Sity':
https://i.sstatic.net/I9OnA.png
I've noticed that changing the word 'City' to any other word fixes the issue. Simply using 'Town' instead of 'City' resolves the problem. However, I'm curious whether this is an odd bug or if there's something I'm missing.
What could be causing this?
I couldn't replicate this problem in Stack Overflow's code snippet tool.
I'm using Bootstrap 4 and the specific portion of HTML in question is as follows:
<div class="form-row">
<div class="form-group needs-validation col-sm-6 col-md-6">
<label for="inputCity">City <small class="text-muted">(required)</small></label>
<input type="text" class="form-control" id="inputCity" name="city" required>
<div class="invalid-feedback">
Please provide your city.
</div>
</div>
<div class="form-group needs-validation col-sm-6 col-md-4">
<label for="inputState">State <small class="text-muted">(required)</small></label>
<input type="text" class="form-control" id="inputState" name="state" required
autocomplete="address-level1">
<div class="invalid-feedback">
Please provide your state.
</div>
</div>
<div class="form-group needs-validation col-5 col-sm-4 col-md-2">
<label for="inputZip">Zip <small class="text-muted">(required)</small></label>
<input type="text" class="form-control" id="inputZip" name="zip" required>
<div class="invalid-feedback">
Please provide your zip code.
</div>
</div>
</div>
EDIT Responding to Comments
@Rdg Replacing the space with does indeed fix the layout. But why does this only occur when followed by the word 'City' and nothing else (granted I haven't tested every word in the English language, so could it be something to do with the exact width of the word 'City'?)
@Geuis Yes I have finally managed to recreate this in codepen, it seems to be an issue with the font I am using ("Raleway") and the exact width of the word "City". https://codepen.io/Redtama/pen/RdRpqX
@Richard Uie I'm not sure what you mean by
substitute the HTML entity for uppercase "c," i.e., &#67;Example with Longer Label Text https://i.sstatic.net/6mknB.png