Also reported at https://www.mediawiki.org/wiki/Topic:U9a5jbzurer785ja
Description
Details
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Disable MF 'fixedHeader' mode in VE | mediawiki/extensions/MobileFrontend | master | +7 -0 |
Related Objects
- Mentioned In
- T189696: Can't scroll dialogs in Mobile Safari
Event Timeline
I came across this while investigating: https://gerrit.wikimedia.org/r/#/c/419463/ but it doesn't appear to help with this bug.
Mobile VE standalone scrolls fine, so it's nothing to do with VE mobile classes in isolation, as do desktop dialogs in VE-MW on mobile safari, so MobileFrontend must be the cause - however I can't unbreak it despite disabling as many MF CSS rules as I can see..
Just copying that rule over to standalone doesn't break it, nor does disabling it in MW (at least using the inspector).
I jumped to that possibility because there's a known issue with elements using that rule, where if you dynamically add content to the element it becomes unscrollable. It certainly could be something else.
Actually, in iOS 11 that property's behavior should be the default, so we could probably remove the rule.
Turns out MobileFrontend completely overrides touchstart/move events for scrolling in their overlays
// prevent scrolling and bouncing outside of .overlay-content if ( this.isIos && this.hasFixedHeader ) { $window .on( 'touchmove.ios', function ( ev ) { ev.preventDefault(); } ) .on( 'resize.ios', function () { self._resizeContent( $window.height() ); } ); }
then
/** * Setups an emulated scroll behaviour for overlays in ios. * @memberof Overlay * @instance */ setupEmulatedIosOverlayScrolling: function () { var self = this; if ( this.isIos && this.hasFixedHeader ) { this.$( '.overlay-content' ).on( 'touchstart', this.onTouchStart.bind( this ) ) .on( 'touchmove', this.onTouchMove.bind( this ) ); // wait for things to render before doing any calculations setTimeout( function () { self._fixIosHeader( self.$( 'textarea, input' ) ); }, 0 ); } },
It seems that this code prevents the toolbar from being scrolled at all, which is a bit of a nice-to-have. Without it the toolbar can be moved, but instantly snaps back into place when you let go.
Maybe it did more on older versions of iOS?
The easy fix for us here is just to disable it in VisualEditorOverlay.
CCing @Jdlrobson
Change 455884 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/MobileFrontend@master] Disable MF 'fixedHeader' mode in VE
In older versions of iOS fixed positioning is available but fundamentally broken. This code was thus trying to provided fixed header emulation.
I'd hope more recent versions of iOS don't have this issue, but to be honest, I've not looked into this recently.
Confusingly, browser.isIos returns false for browsers that are not version 4,5 or 8. I'm guessing that function was setup for this specific reason, so feels like a bit of an overhaul is needed. Might thus be sensible to test a bunch of versions and limit this code to places where it appears to be needed.
Change 455884 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Disable MF 'fixedHeader' mode in VE