Page MenuHomePhabricator

Virtual keyboard hides the text in iOS mobile wikitext editing
Closed, ResolvedPublic0 Estimated Story Points

Description

I'm on an iPad Mini 2 with iOS 9.2.1, browsing in Chrome

When I edit using the mobile site, the virtual keyboard comes up but the text area does not shrink to adjust. That leaves the keyboard on top of the text and makes it basically impossible to type. I can start typing and it will put the text where I touched, but I won't see any of it unless I hide the keyboard. Also, while it's typing, the text box scrolls all the way to the top to make it extra confusing. The problem is probably not obvious when editing small sections of text, but if the section you're editing is long enough to scroll (like longer discussions on talk pages), the problem shows up.

btw, I'd love to submit a patch for this if someone could point me to docs on setting up a dev environment and testing my changes.

Suggested testbed for iOS fix, portrait and landscape. LTR + RTL:

  • iOS 9.3 iPhone Safari
  • iOS 9.3 iPad Safari
  • iOS 9.3 iPad Chrome

Suggested testbed to confirm no additional regression introduced with fix, portrait and landscape, LTR + RTL:

  • Android 2.3 Browser phone form factor
  • Android 4.x/5.x/6.x Chrome phone form factor
  • Android 4.x/5.x/6.x Chrome tablet form factor
  • Opera mobile (not mini) Android 4+ phone form factor
  • UC browser (not mini) Android 4+ phone form factor
  • Windows 7.5 Phone IE
  • Desktop Firefox
  • Desktop Chrome
  • Desktop Safari
  • Internet Explorer 11

Note that iOS 8.4 is out of scope while device / testing service available, but iOS 9.3 is pretty close to iOS 8.4 for layout.

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

@kaldari @Jdlrobson @matmarex @Milimetric I've tagged the backlog for the Reading Web Team since it is part of a project that that team officially supports (MobileFrontend ). It may be that the team that manages the iOS app is more appropriate (especially since this task was once triaged as a "Tracking" task on MobileFrontend), but I think the Reading Web team can determine, with @JMinor (Product Manager for the iOS app), whether or not Wikipedia-iOS-App-Backlog should be tagged. :)

Thanks for your patience.

Looks like the scrolling is triggered by micro.autosize.js. The computed value of scrollTop is 0, even when the page is scrolled.

Another issue is that one can't scroll to the bottom of the textarea after focusing. In VE we work around this by adding bottom padding equal to the height of the page to the text input.

micro.autosize assumes that scrolling happens at the root (window) level, we should really be using the offset of the scroll container (overlay-content). That "library" can probably just be inlined and modified - it seems like it's abandoned.

Just to @MBinder_WMF comment about scope: this doesn't seem to have affected the iOS app which has its own (for better or worse) editing flow.

dr0ptp4kt updated the task description. (Show Details)

Carrying over from email...

@Esanders @Jdforrester-WMF would you be able to spare some time to post up a patch and add @Jhernandez, @Jdlrobson, @bmansurov, @phuedx, @jhobs as code reviewers?

For those following this task later, as @Tnegrin suggested, Reading and Editing management to meet, discuss workflow around editing related bugfixes for mobile web for things of this nature.

micro.autosize.js was originally maintained by Juliusz Gonera, but he hasn't worked for the WMF in a couple years and no one's touched that code since 2013. I agree we should just inline it and update it. It's only 20 lines of JavaScript.

dr0ptp4kt moved this task from 2016-17 Q2 to 2014-15 Q4 on the Web-Team-Backlog board.

Tagging with VisualEditor for prioritization by @Jdforrester-WMF et al in regular standup.

Meanwhile, a WIP has been posted at https://gerrit.wikimedia.org/r/#/c/298392/.

Change 298392 had a related patch set uploaded (by Jforrester):
[WIP] Inline and fix micro.autosize.js for iOS9

https://gerrit.wikimedia.org/r/298392

Jdforrester-WMF renamed this task from virtual keyboard hides the text in iOS mobile editing to Virtual keyboard hides the text in iOS mobile wikitext editing.Jul 12 2016, 6:33 PM
Jdforrester-WMF set the point value for this task to 8.

With cbb300557, I tested master on Beta Cluster with an iOS 10 (beta) iPhone; it does not appear to be fixed, but it is better than production. The scrolling to the wrong position is fixed, but the cursor still ends up under the keyboard and typing doesn't re-position it (this was in both English and Arabic, in both portrait and landscape).

Desktop Chrome/Firefox/Safari all seemed to still be fine, FWIW.

This seems to be halfway fixed now (confirming James's tests). If I click on text on the bottom half of the screen it still gets covered by the keyboard, but at least now I can actually scroll to the text and edit it. Might not be high priority any more, although it would be great to get this working smoothly.

Jdforrester-WMF lowered the priority of this task from High to Medium.Aug 31 2016, 12:56 AM

Agreed.

Jdlrobson claimed this task.
Jdlrobson removed the point value for this task.

I can't replicate this any more on browser stack. I believe it was likely fixed by https://gerrit.wikimedia.org/r/#/c/322117/7/resources/mobile.overlays/Overlay.js (T149363). Please reopen if you are still experiencing this issue.

I'm investigating bugs related to the mobile editor for reading web to fix so iOS users please let me know if you're seeing any similar textarea bugs on your device!

Deskana set the point value for this task to 0.Apr 3 2018, 12:20 PM

Confirmed fixed on the original device I reported this from.