Steps to Reproduce
- Visit https://en.m.wikipedia.org/wiki/Barack_Obama#/editor/0
- 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();