Virtual keyboard hides the text in iOS mobile wikitext editing
Open, NormalPublic8 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.

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 9 2016, 3:52 PM
Jdlrobson moved this task from Backlog to Tracking on the MobileFrontend board.Mar 16 2016, 10:33 PM
Nnemo awarded a token.Apr 16 2016, 3:40 AM
Nnemo added a subscriber: Nnemo.
matmarex added subscribers: Wittylama, StudiesWorld.
matmarex added a subscriber: RHo.

This should probably be high priority, given the huge number of duplicates filed so far.

@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.

Esanders added a comment.EditedJun 26 2016, 11:24 AM

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 triaged this task as High priority.Jun 30 2016, 3:46 PM
dr0ptp4kt updated the task description. (Show Details)
dr0ptp4kt updated the task description. (Show Details)Jun 30 2016, 5:00 PM

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 updated the task description. (Show Details)Jul 9 2016, 1:46 PM

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 Normal.Aug 31 2016, 12:56 AM

Agreed.