Font-size of Input causes mobile Safari to zoom viewport

[binury]

input components default their font-size with .text-sm or 14px

This causes mobile Safari to zoom the viewport when focusing the element since the size is < 16px.

One workaround for this is to disable zooming through the <meta> viewport tag – in any various number of ways — but this is ofc bad for users with accessibility needs… ❌

Another workaround is to override the font-size rule with important at the input level… but this is not always ideal and some circumstances might necessitate overriding the override… 🤷

Had anyone else run into this issue and found a better workaround?

[binury]

Another workaround:

I have looked through multiple answers.

[…] setting maximum-scale=1 in meta tag works fine on iOS devices but disables the pinch to zoom functionality on Android devices. […]

So I wrote a JS function to dynamically change meta tag:

  var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
  if (iOS)
      document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1, maximum-scale=1";
  else
      document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1";

Another hack:

OK, I've read through all the old answers but none of them worked for me. After many hours of trying different things the solution seemed simple in the end:

input{
    transform: scale(0.875);
    transform-origin: left center;
    margin-right: -14.28%;
}

Another hack:

[…] In order to not impact the original design fields, including combo, I opted to apply the transformation at the focus of the field:

input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  font-size: 16px;
}