Due to the font size of text fields being font-sm, which to Tailwind means 0.875rem (14px), the default behavior in iOS devices is to zoom. I have not found any Apple's official documentation about this, but found some articles and forum's answers ¹²³ telling this is because any text minor than 1rem (16px) is considered small, so the device zooms as way to ensure the users could see what they are typing.
Honestly, I think that behavior is pretty legit. And I think input fields should not have a small font size.
Proposition:
Change the text fields (input and textarea) font size to text-base which is 1rem.
Current behavior on iPhone 11 (iOS 17.4.1):
Note after interaction and even route changing, the zoom persists, forcing user to make pinch out gesture to back to normal.
linear[bot]
commented
1 month ago
Due to the font size of text fields being
font-sm, which to Tailwind means0.875rem(14px), the default behavior in iOS devices is to zoom. I have not found any Apple's official documentation about this, but found some articles and forum's answers ¹ ² ³ telling this is because any text minor than1rem(16px) is considered small, so the device zooms as way to ensure the users could see what they are typing.Honestly, I think that behavior is pretty legit. And I think input fields should not have a small font size.
Proposition:
Change the text fields (input and textarea) font size to
text-basewhich is1rem.Current behavior on iPhone 11 (iOS 17.4.1):
https://github.com/plotwist-app/plotwist/assets/56273267/60edb9ec-5257-4202-9f87-0ff1d652a769
Behavior on iPhone 11 (iOS 17.4.1) with
text-base:https://github.com/plotwist-app/plotwist/assets/56273267/b684614b-6342-430b-aea4-e886d5adfefa
Font size change comparison (desktop):
https://github.com/plotwist-app/plotwist/assets/56273267/66859566-8910-4688-a23f-f271a2e81770