This seems like a browser bug to me but I couldn’t find anyone else seeing the same problem. It seems like getComputedStyle isn’t getting the right font-size for an input placeholder for some mobile browsers.
In my example below the placeholder font-size is set to 11px. In some mobile browsers, getComputedStyle thinks the placeholder’s font size is 16px.
I’ve tested this on:
-
iPhone 16 in Safari and Chrome: 16px
-
Samsung Galaxy S22 in Chrome: 16px
-
Samsung Galaxy S22 in Firefox: 11px
-
Chrome and Firefox on Win11: 11px
See this jsfiddle, or snippet below:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<style>
.form-control::placeholder {
font-size: 11px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script>
function updatePlaceholderLength(el) {
var styles = window.getComputedStyle(el);
var placeholderFontSize = window.getComputedStyle(el, '::placeholder').fontSize;
document.querySelector('.debug-info-js').textContent = 'placeholder font size: ' + placeholderFontSize;
}
updatePlaceholderLength(document.getElementById('whatever'));
</script>
<div class="container">
<label class="control-label" for="whatever">Check it out</label>
<input class="form-control" id="whatever" type="text" placeholder="Here is my placeholder.">
<hr>
<pre class="debug-info-js"></pre>
</div>
Just wondering if anyone has any info on this… is it a known bug/limitation? Is this by design? Is there any workaround to get the right font-size?
Tried adding !important to the font-size declaration which of course didn’t work… I have no idea what else I can do.