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 „Gefällt mir“

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

2 „Gefällt mir“

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 „Gefällt mir“

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

I thought it was intended.

4 „Gefällt mir“

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

https://github.com/discourse/discourse/commit/14eb8eea014e10ec41b8748546231e10a802cc68

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 „Gefällt mir“

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 „Gefällt mir“

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 „Gefällt mir“

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 „Gefällt mir“

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

https://github.com/discourse/discourse/pull/7347

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 „Gefällt mir“

This commit should fix the issue with the search input zoom in iOS: https://github.com/discourse/discourse/commit/a452933071b9ad844b02217619aea1a864a02978

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 „Gefällt mir“