Page MenuHomePhabricator

Focusing into New Discussion and Reply Tools text fields causes browser to zoom unexpectedly on mobile
Open, Needs TriagePublic

Description

This task involves the work with making it so mobile browsers' focus/zoom remains consistent as people place their cursors within its text fields.

Environment

The behavior described below was observed in the following environments:

  • Device: iPhone XS
  • Browser(s): Chrome 95.0.4638.50 and Safari
  • OS: iOS 15.0.2
  • Settings > Display & Brightness > Text Size:
    IMG_C12EC9249DD3-1.jpeg (2×1 px, 197 KB)

Behavior

Reply Tool

📺https://youtu.be/0s08QE3q-hk

  1. Visit a talk page on a mobile device. E.g. https://patchdemo.wmflabs.org/wikis/6ce52b531d/w/index.php?title=Talk:Main_Page&mobileaction=toggle_view_mobile .
  2. Click a [ reply ] affordance
  3. Notice the Reply Tool opens
  4. Tap inside the Reply Tool's text field

Actual
❗️5. The browser zooms, causing part of the Reply Tool's text area to be cut off
Expected
✅ 5. The browser's zoom level remains constant and the entirety of the Reply Tool's text area remains in view

New Discussion Tool

📺https://youtu.be/Sm-v6p1l99A)

  1. Visit a talk page on a mobile device. E.g. https://patchdemo.wmflabs.org/wikis/6ce52b531d/w/index.php?title=Talk:Main_Page&mobileaction=toggle_view_mobile .
  2. Click the Add discussion affordance
  3. Notice the New Discussion Tool opens
  4. Tap inside the New Discussion Tool's Title field
  5. Notice the software keyboard appears on-screen, and the browser's zoom level remains constant, and the entirety of the New Discussion Tool's Title text input area remains in view
  6. Tap inside the tool's Description field

Actual
❗️6. The browser zooms, causing part of the New Discussion Tool's Description text area to be cut off
Expected

✅ 6. The browser's zoom level remains constant and the entirety of the New Discussion Tool's Description text area remains in view

Event Timeline

ppelberg updated the task description. (Show Details)
ppelberg updated the task description. (Show Details)
ppelberg updated the task description. (Show Details)
Esanders renamed this task from Focusing into New Discussion and Reply Tools text fields causes browser to zoom unexpectedly to Focusing into New Discussion and Reply Tools text fields causes browser to zoom unexpectedly on mobile.Nov 1 2021, 4:32 PM

Input zooming should only happen with the size is less than 16px, which it isn't: https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/

I can't reproduce this on my iPhone 8, iOS 15. I've also tested on crossbrowsertesting.com (real devices remotely) and can't reproduce on:

  • iPhone XS Max, iOS 13
  • iPhone SE, iOS 14
  • iPhone 11, iOS 13.1
  • iPhone 12 Prox Max, iOS 14

Perhaps you have some non-standard text size settings on your phone?

I've just tried it on an iPhone 13 Pro on iOS 15, and cannot reproduce it there.

Input zooming should only happen with the size is less than 16px, which it isn't: https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/

I can't reproduce this on my iPhone 8, iOS 15. I've also tested on crossbrowsertesting.com (real devices remotely) and can't reproduce on:

  • iPhone XS Max, iOS 13
  • iPhone SE, iOS 14
  • iPhone 11, iOS 13.1
  • iPhone 12 Prox Max, iOS 14

Perhaps you have some non-standard text size settings on your phone?

@Esanders, here is what I see when I go to Settings > Display & Brightness > Text Size:

IMG_C12EC9249DD3-1.jpeg (2×1 px, 197 KB)


Update: I am NOT able to reproduce this issue after adjusting the Text Size to be the following:

IMG_841EE456EFD8-1.jpeg (2×1 px, 192 KB)


Update: I am NOT able to reproduce this issue after adjusting the Text Size to be the following:

IMG_841EE456EFD8-1.jpeg (2×1 px, 192 KB)

Considering the above, I'm going to remove this issue as blocking the mobile deployment.

That makes sense. I think this is an OS feature so not much we can do about it.