[BUG] - Input font-size causes iOS zoom issue on focus (accessibility concern)

[Junk-debug]

HeroUI Version

2.7.6

Describe the bug

🐛 Input font-size causes iOS zoom issue on focus (accessibility concern)

Summary:

On iOS devices, inputs with font-size smaller than 16px trigger automatic zoom when focused. HeroUI components use text-sm (14px) by default for form inputs, which leads to this behavior. This creates an inconsistent and frustrating user experience on mobile Safari.

---

Why it matters:

• The zoom behavior is unintended, and breaks layout/UX on iOS.
• A common workaround is to disable scaling via maximum-scale=1 or user-scalable=no, but that violates accessibility best practices and WCAG 2.1 guidelines.
• Increasing input font-size globally to 16px does prevent zooming, but leads to inconsistent input styling, especially when surrounded by other text using text-sm.

---

Context:

• Related accessibility guidelines: WCAG 1.4.4 – Resize text

---

Possible workaround:

We can manually override font-size: 16px on input, but this breaks visual consistency unless carefully tuned per component.

---

Let me know if you'd like me to provide a PR or further testing.

Thanks for your great work on HeroUI!

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Use any input component from HeroUI (e.g. in a login form).
2. Load the page on an iPhone in Safari.
3. Tap into an input field.
4. Safari zooms in — the layout shifts, and it doesn’t zoom out automatically after blur.

Expected behavior

Inputs in HeroUI should not trigger unexpected zooming on iOS when focused. Ideally:

• Input fields should use at least 16px font-size on mobile devices to prevent auto-zoom.
• This should be achieved without requiring developers to disable user scaling, as that breaks accessibility.
• The design should remain visually consistent with the rest of the UI — ideally by only adjust

Screenshots or Videos

No response

Operating System Version

iOS

Browser

Safari

[linear]

ENG-2542 [BUG] - Input font-size causes iOS zoom issue on focus (accessibility concern)

[Coop4Free]

That's a super important point. You can see the impact especially in modals.
I wonder why no one has noticed this until now.

[shawnmclean]

have to remember to set size="lg", that set the font-size to 16

[SiegeSailor]

2.8.7 still has this issue on Chrome and Safari.

@Junk-debug and @shawnmclean mentioned that increasing font-size to 16px prevents iOS from zooming. However, I can't get it to work on my end...it still has issues with zooming on focus:

<Input
  classNames={{ input: "text-medium" }}
  size="lg"
  ...
>

input {
  font-size: 16px !imporntant;
}

I also tried to set user-scalable to no and maximum-scale to 1, still no luck (see https://streamable.com/e/462g7w for video).

Please see https://jinyu-zhang.com and click the terminal icon next to the dark mode icon.

[jackyef]

Hey @SiegeSailor , are you still having the same issue? I tried focusing on the input within the "terminal" modal on your site and didn't experience any zoom-in. If you are still having the same issue, I am suspecting it's some configuration specific on your device. Do you have a clue on what settings you may have on your iOS device that might cause it? Perhaps, page zoom level?

[ansidot]

I’m also experiencing this issue.

What I ended up doing as a workaround was disabling zoom via the Next.js viewport configuration. The root problem is indeed that in HeroUI v2.8.7, the default font-size of inputs is 14px and does not scale up to 16px on mobile, which triggers the iOS Safari auto-zoom behavior.

I tested inputs from other component libraries, and on mobile they correctly switch to 16px, so iOS does not auto-zoom.
I also tested the HeroUI v3 beta, and it looks like this is now handled correctly there as well 👍

It would be really great to have this fix backported or supported in HeroUI v2. Right now the only reliable workaround is disabling zoom globally or manually set size="lg" to all Input / Select / Autocomplete components, which isn’t ideal.

Thanks!

[SiegeSailor]

Hey @SiegeSailor , are you still having the same issue? I tried focusing on the input within the "terminal" modal on your site and didn't experience any zoom-in...

Hello @jackyef, thank you for testing this out! I checked my Chrome and Safari settings and didn't find anything out of the ordinary. The page zoom level is 100%. Would you mind sharing what browsers you were using for testing?

@ansidot, would you mind sharing the exact code snippet you used to fix the issue? I changed the font size, disabled the viewport configuration, and changed the input size, still no luck 😰 Guess I did something wrong.

[ansidot]

@ansidot, would you mind sharing the exact code snippet you used to fix the issue? I changed the font size, disabled the viewport configuration, and changed the input size, still no luck 😰 Guess I did something wrong.

Hey @SiegeSailor !

I put the Viewport config like this in the main layout.tsx of my app :

import type {Viewport} from "next";

export const viewport: Viewport = {
    width: "device-width",
    initialScale: 1,
    maximumScale: 1,
}

Hope it will help you !

[SiegeSailor]

Hey @SiegeSailor !

I put the Viewport config like this in the main layout.tsx of my app :

import type {Viewport} from "next";

export const viewport: Viewport = {
    width: "device-width",
    initialScale: 1,
    maximumScale: 1,
}

Hope it will help you !

@ansidot Thank you so much for sharing it! I found no difference between mine and yours through 😰:

// settings/head.ts
export const globalViewport: Viewport = {
  width: "device-width",
  initialScale: 1.0,
  // See https://github.com/heroui-inc/heroui/issues/5326.
  userScalable: false,
  maximumScale: 1.0,
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "white" },
    { media: "(prefers-color-scheme: dark)", color: "black" },
  ],
};

// app/layout.ts
export const viewport: Viewport = globalViewport;

I am starting to think that the issue is totally my local mobile settings (as @jackyef mentioned). Would you mind sharing your website link? I just wanna check if the same issue persists on my mobile 🙋‍♂️

[jackyef]

Would you mind sharing what browsers you were using for testing?

@SiegeSailor , I was testing on iOS Safari. In my case the font-size were already 16px and I could only reproduce the issue when page zoom level is < 100%. It's also worth noting that decreasing font-size via this particular setting on Safari can also trigger the issue. Not sure if that's the case you are experiencing, but hopefully it helps.

[SiegeSailor]

@jackyef, Thank you for the information. I have confirmed that my font size was set to 100%, and I am still seeing the issue. Please see the uploaded video: https://youtube.com/shorts/4ExjtqOeZp8?feature=share.

Some other information:

• Both Safari and Chrome have the same issue
• Tested on other mobiles and still have the same issue (iPhone 11 and iPhone 12)
• I have the following setups for my Next.js website https://jinyu-zhang.com/ (the filenames explain their purposes):

// global.css
input {
  font-size: 16px !important;
}

// settings/heads.ts
export const globalViewport: Viewport = {
  width: "device-width",
  initialScale: 1.0,
  userScalable: false,
  maximumScale: 1.0,
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "white" },
    { media: "(prefers-color-scheme: dark)", color: "black" },
  ],
};

// components/Header/Terminal.tsx
<Input
  aria-label="Terminal"
  classNames={{ inputWrapper: "bg-default-100" }}
  // See https://github.com/heroui-inc/heroui/issues/5326.
  size="lg"
  isClearable
  labelPlacement="outside"
  onKeyUp={handleCommand}
  onValueChange={setCommand}
  placeholder="Press Enter to execute command"
  ref={refInput}
  startContent="$"
  type="text"
  value={command}
/>

[wingkwong]

Closing in favor of v3. If the issue is reproducible in v3, please create a new one with a minimal reproducible example.