Mobile UI zooms undesirably on search

I’m finding my forum frequently “zooms in” slightly on mobile, leaving buttons slightly truncated.

I can recreate this consistently by tapping the search button (I think it may also be triggered elsewhere too):

5 Likes

Might be wrong, this might be the result of recent changes @pmusaraj ?

2 Likes

Happening to me too on meta and my 2 instances. Been about a week or so.

Was too lazy to report it before. But can confirm it’s an issue

1 Like

Can confirm. Probably because the viewport meta tag got changed from user-scalable=no to user-scalable=yes

I thought it was intended.

4 Likes

I don’t think it’s true, because we have:

or is it not working as penar thought it would?

Need to dig more, but inspecting the DOM with a touch inside an input I get:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover">

So doesn’t look like it’s applying the fix.

2 Likes

So it appears there are multiple cases:

  • [:white_check_mark:] when you are on the page with no focus and you select the input.
  • [:no_entry_sign:] when you focus input after transition. Adding a focus event now correctly set user-scalable=no, but it does still zoom in
5 Likes

Here’s what happens on Android, you can pinch-to-zoom anywhere on the app:

GIF

From my understanding this is expected. This is exactly what the commit I linked is trying to keep on iOS: do not zoom when focusing input while keeping the possibility to pinch zoom.

4 Likes

Oh, I see. This has been happening only for a couple weeks so it’s definitely new. I’ll try to get used to it for now :+1:

The problem is that the UI becomes horizontally truncated in normal use.

Forum users may not be aware they need to pinch to zoom in order to work around this truncation.

That’s not what I’m saying. I’m saying the ability to pinch zoom is expected, not the zoom in input.

4 Likes

Ah good, okay. Yes, I like having the ability to pinch-to-zoom on forum content

Was digging a bit more and in this PR

the viewport meta for mobile devices got changed from

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

to

<meta name="viewport" content="width=device-width, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover">

So I also think its intended that now everyone can zoom on mobile devices.

3 Likes

This commit should fix the issue with the search input zoom in iOS: FIX: disable input zoom on search in iOS · discourse/discourse@a452933 · GitHub

The intended behaviour is to enable zooming on touch devices, but iOS automatically zooms on inputs with font size set to less than 16px, which is not a very fun experience, so we’ve implemented a workaround to avoid that auto-zoom.

11 Likes