Set a font size of at least 16px for inputs on mobile #1816
Conversation
To prevent iOS from zooming into `input` and `textarea` fields when tapped, set a font size that is the maximum of 16px and the size inherited from the parent element.
| @@ -70,6 +70,13 @@ export default /** @type {Partial<import('tailwindcss').Config>} */ ({ | |||
| inverted: '#f2f2f2', | |||
| }, | |||
| }, | |||
| fontSize: { | |||
| // Set font size to the maximum of 16px and the inherited size. | |||
There was a problem hiding this comment.
I'm just spelling out here what "100%" does.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #1816 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 68 68
Lines 1234 1234
Branches 468 468
=========================================
Hits 1234 1234 ☔ View full report in Codecov by Sentry. |
| // | ||
| // On iOS, the input font size must be at least 16px to prevent the | ||
| // browser from zooming into it on touch. | ||
| 'at-least-16px': 'max(16px, 100%)', |
There was a problem hiding this comment.
Perhaps we could use a name which does not include the 16px value, as that's a detail that we may want/have to change in future.
Perhaps something that makes it clear that there won't be zoom in touch devices, something in the lines of prevent-zoom, so that we can use it as touch:text-prevent-zoom.
There was a problem hiding this comment.
I considered something like this but at-least-16px makes it more obvious at a glance what the visual effect is. The 16px value has been shipped in WebKit for years so I think is unlikely to change. They can't make it larger without breaking a lot of sites and if they made it smaller, it would be a long time before we could make a change.
There was a problem hiding this comment.
We do have a touch-minimum size that we use, and this is analogous, except that here we are saying "at least the minimum touch size". I suppose at-least-min-input-size would work, albeit a bit verbose.
There was a problem hiding this comment.
Ok, thanks for the clarification. I think you are right.
Agree. Specially in LMS the font size is pretty small, and it's always tricky to experiment with things here, then move them there just too find out they might be too small. |
To prevent iOS from zooming into
inputandtextareafields when tapped, set a font size that is the maximum of 16px and the size inherited from the parent element.This has no effect in the pattern library website, because the inputs there already inherited a font size of 16px. It does however make a difference in other downstream UIs like new groups forms in h which use a smaller size. We may wish to change the base size for text to 16px in those UIs in future, but that is a global change which has more complexity. The change here ensures that this size threshold is always met.