Page MenuHomePhabricator

[Bug] Mobile editor shows empty screen under content
Closed, ResolvedPublic2 Estimated Story Points

Description

Steps to Reproduce

  1. Visit https://en.m.wikipedia.org/wiki/Barack_Obama#/editor/0
  2. Scroll to the bottom

Expected Results

  • Mobile editor leaves 60% padding at the end of the editor content, enough to accommodate virtual-keyboards on mobile devices.

Actual Results

  • Text area exceeds content by a full screen. The emptiness is confusing. If it's necessary to work around virtual keyboard space concerns, a height less than full screen should be used so that a confusing blank screen is not possible.

Environments Observed

Browser Version

  • Chromium v69.0.3497.81

OS Version

  • Ubuntu v18.04

Device Model

  • iPhone 5 sim

Device Language

  • English

Developer notes

It looks like the editor has a height: 6854px, set via inline style. It shouldn't be that high, so there's clearly something wrong with the calculation. It should be more around the 3000px region.

According to https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/master/resources/mobile.editor.overlay/EditorOverlay.js#L383 the height should be the height of this.$content.prop( 'scrollHeight' )

The issue can be fixed by running:

$( '.wikitext-editor' ).css( 'height', '' ).css( 'height', $( '.wikitext-editor' ).prop( 'scrollHeight' ) )

The issue is either caused by:

  • a problem in the logic inside _resizeEditor
  • by failing to call setContent
  • o.$content is not set correctly

The following code suggests it is not a problem with _resizeEditor:

var O = mw.mobileFrontend.require('mobile.editor.overlay/EditorOverlay' );
o = new O({ api: new mw.Api() });
o.$el = $('.editor-overlay')
o.$content = o.$el.find( '.wikitext-editor' )
o._resizeContent();

Event Timeline

Restricted Application changed the subtype of this task from "Deadline" to "Task". · View Herald TranscriptSep 19 2018, 3:44 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Jdlrobson updated the task description. (Show Details)Sep 19 2018, 4:15 PM
Jdlrobson moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.
Jdlrobson updated the task description. (Show Details)Sep 25 2018, 5:00 PM
ovasileva set the point value for this task to 2.Sep 26 2018, 4:17 PM

Change 465522 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/extensions/MobileFrontend@master] Prevent editor overlay height from being calculated incorrectly

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

Jdrewniak removed Jdrewniak as the assignee of this task.Oct 9 2018, 9:35 PM
Jdrewniak added a subscriber: Jdrewniak.
Jdrewniak updated the task description. (Show Details)Oct 9 2018, 9:39 PM
Jdlrobson added a subscriber: Jdlrobson.

Can you please sign off as the original reporter? That should suffice for QA here.

Change 465522 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Prevent editor overlay height from being calculated incorrectly

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

Niedzielski closed this task as Resolved.Oct 16 2018, 5:10 PM
Niedzielski claimed this task.

I can no longer reproduce.