Cannot scroll pages named “list” on mobile (due to page-list class in MobileFrontend)
Closed, ResolvedPublic0 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	Theknightwho
	May 30 2023, 1:31 PM

Description

Steps to replicate the issue (include links if applicable):

Visit https://nl.m.wiktionary.org/wiki/list?safemode=1 or https://en.m.wiktionary.beta.wmflabs.org/w/index.php?title=list

What happens?:

Scrolling is disabled.

What should have happened instead?:

Scrolling should work, as on all other pages.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Checking [https://nl.m.wiktionary.org/wiki/list?safemode=1], the issue occurs on Chrome 113.0.5672.127 (desktop), Edge 113.0.5672.127 (desktop), Firefox 113.0.2 (desktop), Chrome 113.5672.121 (iPhone), Safari (iPhone).
Several users have reported this issue on Wiktionary, so it does not appear to be limited to my devices.
Other examples: [[en:wikt:list]], [[nl:wikt:list]], [[zh:wikt:list]] (70 in total). - NOTE: local workaround in place on English Wiktionary:

TODO

Remove the selector-class-pattern rule from .stylelintrc.json to expose violations
Add the class mw-mf-page-list alongside page-list (we need to keep both since this will impact pages with cached HTML)
For now, add /* stylint-disable selector-class-pattern */ in problematic files/above problematic lines that are not related to this bug
A week after the change has been deployed remove the "page-list" selector.

QA

On mobile site:

Run a search. Confirm search results look like so:

Screenshot 2024-01-29 at 8.24.34 AM.png (1×794 px, 196 KB)

Verify the bug steps in the "Steps to replicate the issue"

QA Results - Beta

AC	Status	Details
1	✅	T337741#9504182
2	✅	T337741#9504182

QA Results - Prod

AC	Status	Details
1	✅	T337741#9514138
2	✅	T337741#9514138

Details

Subject	Repo	Branch	Lines +/-
Remove deprecated page-list class	mediawiki/extensions/MobileFrontend	master	+8 -13
Replace page-list with mw-mf-page-list	mediawiki/skins/MinervaNeue	master	+2 -2
Avoid page-list collision with body.page-list pages	mediawiki/extensions/MobileFrontend	master	+17 -11
Expose problematic selectors	mediawiki/extensions/MobileFrontend	master	+3 -1

Customize query in gerrit

Related Objects

Mentioned In: T355380: Verify 1.42.0-wmf.16 deployment

Event Timeline

Theknightwho created this task.May 30 2023, 1:31 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 30 2023, 1:31 PM

Hi @Theknightwho, thanks for taking the time to report this!
Cannot reproduce on https://en.m.wiktionary.org/wiki/list . Please provide all information requested.

Hi @Aklapper - I've updated the initial report with the browsers I've tested it on.

Theknightwho updated the task description. (Show Details)May 30 2023, 3:30 PM

The_Editor.s_Apprentice updated the task description. (Show Details)May 30 2023, 3:36 PM

The_Editor.s_Apprentice subscribed.

@Aklapper
I've tested it on multiple browsers on MacOS, including Firefox 113.0.2, Chrome 113.0.5672.126, Safari 14.1.2; all of these have the bug when accessing the mobile site using any of the following links: https://en.wiktionary.org/wiki/list?useskin=minerva, https://en.m.wiktionary.org/wiki/list, https://en.m.wiktionary.org/wiki/list?useskin=vector

When using the Vector skin, there are many rendering issues, including greyed out links, newlines before and after links, misaligned headers, white borders after each line, and no scrolling (see image below and compare with the normal desktop page with Vector skin, the ToC is collapsed to better illustrate the effect); some of these also occur with Minerva.

Screenshot 2023-05-30 at 23.38.32.png (1×2 px, 2 MB)

Since the bug occurs in multiple browsers, I would suggest that this is a backend problem in Mediawiki rather than a browser or browser engine -specific issue.

jberkel subscribed.May 30 2023, 4:43 PM

Soap subscribed.May 30 2023, 4:57 PM

The problem is that a css class named page-TITLE is always applied by MediaWiki to the <body> element. So in the case of the page title "list" that is class page-list.

However page-list is also used as a class name for styling within the MobileFrontend extension, see https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/master/resources/mobile.pagelist.styles/pagelist.less. This include overflow: hidden; which is what blocks the scrolling. You can use the browser console to remove the class from the <body> to see this and the other issues disappear.

I guess the MobileFrontend class should be renamed. It might be worth checking if there are any other uses of classes named like page-xyz

@Pcoombe [[en:wikt:summary]], [[en:wikt:heading]] and [[en:wikt:actions]] may also be exhibiting unintended behaviour, in that case. There are a few other classes in that format, but the titles are implausible for Wiktionary.

Aklapper renamed this task from Pages named “list” broken on mobile - scrolling disabled to Cannot scroll pages named “list” on mobile (due to page-list class in MobileFrontend).May 30 2023, 7:10 PM

Erutuon subscribed.May 30 2023, 7:29 PM

Fenakhay subscribed.May 30 2023, 10:46 PM

bwang added a project: Web-Team-Backlog.Jun 8 2023, 4:26 PM

LGoto triaged this task as Medium priority.Jun 8 2023, 5:25 PM

LGoto moved this task from Incoming to Groomed on the Web-Team-Backlog board.

I suggest for now, we change these selectors from .page-list to div.page-list since this will make sure the styling doesn't apply to the body tag. Patch very much welcome, we are unlikely to get to this given our existing backllog.

I've opened https://github.com/wikimedia/stylelint-config-wikimedia/issues/212 for the general issue.

jhsoby subscribed.Jun 12 2023, 1:53 PM

Change 929424 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/MobileFrontend@master] Expose problematic selectors

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

gerritbot added a project: Patch-For-Review.Jun 12 2023, 9:51 PM

Change 929424 abandoned by Jdlrobson:

[mediawiki/extensions/MobileFrontend@master] Expose problematic selectors

Reason:

Just wanted to check this was the cause of the linter not flagging this.

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

Maintenance_bot removed a project: Patch-For-Review.Jun 12 2023, 11:31 PM

Jdlrobson removed a project: good first task.Jun 12 2023, 11:36 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson updated the task description. (Show Details)Jun 13 2023, 3:07 PM

I put a local workaround in place on enwiktionary for the time being. You can still reproduce the bug on the mobile domains of other language Wiktionaries.

Jdlrobson added a project: good first task.Jan 19 2024, 12:33 AM

Change 991749 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/MobileFrontend@master] Avoid page-list collision with body.page-list pages

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

gerritbot added a project: Patch-For-Review.Jan 19 2024, 10:48 AM

due to needing backwards compabitilty, the patch currently violates the web pack module size rule. not sure what to do about that yet.

Will also need a follow up patch to remove page-list, but not before we fix the usage of page-list in minerva and possible even in mediawiki/services/mobileapps

Change 991766 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/MobileFrontend@master] Remove deprecated page-list class

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

Thanks for working on this @TheDJ !

Jdlrobson moved this task from QA to Incoming on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Jan 19 2024, 5:34 PM

Change 991749 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Avoid page-list collision with body.page-list pages

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

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.15; 2024-01-23).Jan 19 2024, 6:00 PM

Change 993239 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/skins/MinervaNeue@master] Replace page-list with mw-mf-page-list

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

Jdlrobson moved this task from Incoming to QA on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Jan 29 2024, 4:22 PM

Jdlrobson updated the task description. (Show Details)Jan 29 2024, 4:25 PM

Jdlrobson updated the task description. (Show Details)

Change 993239 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Replace page-list with mw-mf-page-list

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

Change 991766 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Remove deprecated page-list class

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

Maintenance_bot removed a project: Patch-For-Review.Jan 29 2024, 5:30 PM

ReleaseTaggerBot edited projects, added MW-1.42-notes (1.42.0-wmf.16; 2024-01-30); removed MW-1.42-notes (1.42.0-wmf.15; 2024-01-23).Jan 29 2024, 6:00 PM

@TTO can you remove the workaround https://en.wiktionary.org/w/index.php?title=MediaWiki%3AMobile.js&diff=75166898&oldid=54131821 ?

Thanks for working on this @TheDJ !

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Run a search. Confirm search results look like the image in the description:

Visit https://nl.m.wiktionary.org/wiki/list?safemode=1 or https://en.m.wiktionary.beta.wmflabs.org/w/index.php?title=list
✅ AC2: Scrolling should work, as on all other pages.

screenshot 223.mov.gif (616×540 px, 573 KB)

Edtadros updated the task description. (Show Details)Jan 31 2024, 10:21 PM

TheDJ claimed this task.Jan 31 2024, 10:35 PM

Izno moved this task from Backlog to Change CSS Hook on the CSS board.Feb 1 2024, 2:47 AM

Jdlrobson reassigned this task from TheDJ to ovasileva.Feb 1 2024, 5:35 PM

All done. Resolving.

Test Result - Prod

Status: ✅ PASS
Environment: nlwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Run a search. Confirm search results look like the image in the description:

Visit https://nl.m.wiktionary.org/wiki/list?safemode=1 or https://en.m.wiktionary.beta.wmflabs.org/w/index.php?title=list
✅ AC2: Scrolling should work, as on all other pages.

Edtadros updated the task description. (Show Details)Feb 5 2024, 5:43 PM

Edtadros mentioned this in T355380: Verify 1.42.0-wmf.16 deployment.Feb 5 2024, 5:52 PM

	F41728800: Screenshot 2024-01-29 at 8.24.34 AM.png
	Jan 29 2024, 4:25 PM

	F37084481: Screenshot 2023-05-30 at 23.38.32.png
	May 30 2023, 3:47 PM

	F41784084: screenshot 429.png
	Feb 5 2024, 5:41 PM

	F41736104: screenshot 223.mov.gif
	Jan 31 2024, 10:20 PM

	F41735748: screenshot 420.png
	Jan 31 2024, 10:20 PM

Cannot scroll pages named “list” on mobile (due to page-list class in MobileFrontend)Closed, ResolvedPublic0 Estimated Story PointsBUG REPORTActions

Description

TODO

QA

QA Results - Beta

QA Results - Prod

Details

Related Objects

Event Timeline

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

Cannot scroll pages named “list” on mobile (due to page-list class in MobileFrontend)
Closed, ResolvedPublic0 Estimated Story PointsBUG REPORT
Actions