Page MenuHomePhabricator

[BUG] Newcomer homepage mobile - user should not be able to scroll below the welcome "peek" drawer
Closed, ResolvedPublicBUG REPORT

Description

List of steps to reproduce (step by step, including full links if applicable):

  • Create a new account on mobile
  • Navigate to the newcomer homepage for the first time to see the welcome peek drawer
  • Swipe down

What happens?:
The user is able to swipe to see the content below the drawer:

What should have happened instead?:
The drawer should be dismissed

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc:

  • Detected on 2021-07-1
  • Pixel 4 device (Android)
  • Mobile Chrome
  • eswiki (production)

Event Timeline

kostajh added a project: MobileFrontend.
kostajh subscribed.

I'm wondering if this is something that affects all MobileFrontend drawers (tentatively tagging that project) or just our implementation of it.

I'm wondering if this is something that affects all MobileFrontend drawers (tentatively tagging that project) or just our implementation of it.

I could not find this issue happening with other instances of drawers (but there might be). I re-checked wmf.2 on iOS - the issue is still present.

Hmm, yeah it seems to be something specific to the CSS on Special:Homepage. For reference you can make a drawer on a page like so:

var Drawer = mw.mobileFrontend.require( 'mobile.startup' ).Drawer;
 var drawer = new Drawer( {} );
document.body.appendChild( drawer.$el[ 0 ] );
 drawer.show();

and it looks like creating a drawer that way on Special:Homepage results in the scroll issue.

The drawer should be dismissed

@RHo As far as I know, swipe down is not defined by MobileFrontend's drawer as a way to close the drawer; instead you have to either tap outside or on the contents of the drawer to dismiss it. I'd propose that the fix for this task is to make drawers on Special:Homepage stay anchored to the bottom of the viewport for consistency with the way drawers behave elsewhere, and that swipe down to close is handled at another time or in a different task. Does that sound OK?

Hmm, yeah it seems to be something specific to the CSS on Special:Homepage. For reference you can make a drawer on a page like so:

var Drawer = mw.mobileFrontend.require( 'mobile.startup' ).Drawer;
 var drawer = new Drawer( {} );
document.body.appendChild( drawer.$el[ 0 ] );
 drawer.show();

and it looks like creating a drawer that way on Special:Homepage results in the scroll issue.

The drawer should be dismissed

@RHo As far as I know, swipe down is not defined by MobileFrontend's drawer as a way to close the drawer; instead you have to either tap outside or on the contents of the drawer to dismiss it. I'd propose that the fix for this task is to make drawers on Special:Homepage stay anchored to the bottom of the viewport for consistency with the way drawers behave elsewhere, and that swipe down to close is handled at another time or in a different task. Does that sound OK?

thanks for the ping @kostajh, that sounds good to me 👍🏻

Change 756547 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Homepage: prevent scroll below the welcome drawer

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

Sgs changed the task status from Open to In Progress.Jan 24 2022, 11:51 AM
Sgs claimed this task.

Test wiki created on Patch demo by SGimeno (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/89a6013c4d/w/

Test wiki on Patch demo by SGimeno (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/89a6013c4d/w/

Test wiki created on Patch demo by SGimeno (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/68652bb369/w/

Test wiki on Patch demo by SGimeno (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/68652bb369/w/

Test wiki created on Patch demo by SGimeno (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/75d5c5b311/w/

Test wiki on Patch demo by SGimeno (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/75d5c5b311/w/

Test wiki created on Patch demo by SGimeno (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/6b72926ff6/w/

Test wiki on Patch demo by SGimeno (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/6b72926ff6/w/

Test wiki created on Patch demo by SGimeno (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/ac2bac7c26/w/

There's a fix for keeping the drawer anchored to the bottom. If we want to make the swipe down gesture to dismiss the drawer we should do it for all drawers in the application. So far in:

  1. Homepage.mobile/index.js
  2. HelpPanelCta.js
  3. TaskExplanationWidget.js
  4. PostEdit/index.js

Change 756547 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Homepage: prevent scroll below the welcome drawer

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

kostajh changed the task status from In Progress to Open.Feb 1 2022, 10:15 AM

Test wiki on Patch demo by SGimeno (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/ac2bac7c26/w/