6

I want to disable auto zoom when focusing an HTML input field on Android Firefox (possibly iOS Safari).

I've read many related, ancient threads on SO [1, 2, 3] and on the web, but found neither a working solution nor a definitive answer that this is not possible in 2021. The only test device I have is an Android phone (this may also happen with iOS), on which the issue only comes up with Firefox; Chrome works as intended (by me).

I have tried:

  • setting font-size: 16px on the input field
  • setting <meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1" />
  • and out of desperation even <meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1, user-scalable=no">

Android 11, Firefox 93.1.0

Is what I want to achieve really not possible?

makeworld
  • 1,266
  • 12
  • 17
Wang Tang
  • 540
  • 9
  • 16
  • 1
    I've been having the same problem. I filed [this bug](https://github.com/mozilla-mobile/fenix/issues/22235) with the Firefox Mobile team. – makeworld Oct 30 '21 at 23:29
  • 1
    As indicated in the GitHub thread, the bug I filed has been moved to Bugzilla. See [here](https://bugzilla.mozilla.org/show_bug.cgi?id=1738696). – makeworld Nov 01 '21 at 15:32
  • Thanks for the initiative! But if it is indeed a bug, if/when it eventually gets fixed that means there'll be no way to achieve this effect for older versions. Ah well, web dev. Something is bound to not work... – Wang Tang Nov 23 '21 at 16:21
  • Reading the thread, I believe setting `minimum-scale=1, maximum-scale=1` works for versions before 94. It's only 94 or <=94.1.2 that's affected. It was a regression. So yeah it's broken for this version, but not previous ones, and hopefully not for future ones either. – makeworld Nov 23 '21 at 16:46
  • Well, maybe I should read updates of bugs... I only read this some weeks ago, when you posted it, but seems wholly taken care of. Thanks for following through! If you post it as an answer, I can accept you and close the question. – Wang Tang Nov 23 '21 at 17:34
  • You're welcome! I was going to wait to post an answer once they've closed the issue as fixed. – makeworld Nov 23 '21 at 18:11

1 Answers1

8

Fixed in 96

This is now fixed for Firefox Mobile 96 and later. There is some indication from the bug thread that it wasn't an issue in versions before 94, but I can't confirm exactly what version introduced this bug.

Set a meta tag with minimum-scale=1 and maximum-scale=1, such as:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1" />

Reference: Bug 1738696

Just setting user-scalable=no in a <meta name="viewport" tag will work in the future, as well as just setting CSS like touch-action: manipulation. Follow Bug 1746126 for updates on that.

For all mobile browsers

To prevent input field zooming across all mobile browsers, I'd suggest also including user-scalable=no, just to cover all your bases. So the final answer is to put this in your <head>.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
makeworld
  • 1,266
  • 12
  • 17
  • 1
    I've been having the same issue with Firefox mobile (v106) zooming in on input fields. I added your final answer, but the issue persists. I can prevent it from happening only by adding blank space so the page height is larger than the screen height. [here's an example that zooms on my device](https://codepen.io/floogle/full/vYrXEWZ) (may need to view in "full page" mode). – falc2 Nov 05 '22 at 12:53
  • @falc2 I'm not seeing a `` tag in your example – HighCommander4 Dec 27 '22 at 09:26
  • @falc2 Never mind, I see the `` tag is specified in the Codepen settings. Could you file a bug in the [Firefox issue tracker](https://bugzilla.mozilla.org/enter_bug.cgi?product=Core&component=Panning+and+Zooming) please? – HighCommander4 Dec 27 '22 at 09:29
  • 1
    setting either user-scalable=no or a maximum-scale value < 5 will violate the lighthouse audit for accessibility. zooming in should be a user choice and not prohibited by sites. the real issue here is arbitrary browser behaviour in triggering involuntary zoom on input focus. – ystan- Jan 08 '23 at 07:00
  • @ystan- modern browsers now let users zoom in even when a site disables it (sometimes requiring a settings change). So in practice this shouldn't cause an actual accessibility issue – makeworld Jan 09 '23 at 19:23