Page MenuHomePhabricator

Unable to scroll OOUI dialogs on iOS
Closed, ResolvedPublic8 Estimated Story Points

Event Timeline

Jdforrester-WMF raised the priority of this task from to Medium.
Jdforrester-WMF updated the task description. (Show Details)
Jdforrester-WMF moved this task to Epics on the VisualEditor board.
Jdforrester-WMF added a subscriber: Jdforrester-WMF.
Jdforrester-WMF set Security to None.

This seems to be a -webkit-overflow-scrolling: touch issue.

Esanders added a subscriber: Esanders.

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

This seems to be a -webkit-overflow-scrolling: touch issue.

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

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

Esanders renamed this task from Unable to scroll the "Review your changes" screen on mobile (iOS Safari 9.x) to Unable to scroll OOUI dialogs on iOS.Aug 28 2018, 6:10 PM
Esanders claimed this task.
Esanders moved this task from Incoming to Code review on the VisualEditor (Current work) board.

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

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