Frontend performance issue for tablet devices loading parsoid content
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT
Actions

Description

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

Visit https://en.wikivoyage.org/wiki/San_Carlos_de_Bariloche?useparsoid=1 on the mobile skin at 900px

What happens?:
The sections start collapsed then expand. This is a significant flash of unstyled content / reflow which is a performance issue.

What should have happened instead?:

They should be expanded from the start

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

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

This seems to because of an error in the CSS. It uses max-width-breakpoint-tablet instead of max-width-breakpoint-mobile. The JavaScript uses wgMFDeviceWidthTablet which corresponds with max-width-breakpoint-mobile.

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	mobilefrontend: Fix Parsoid content reflow on tablets	mediawiki/extensions/MobileFrontend	master	+2 -1
	Fixes flash of unstyled content performance issue on tablet devices for parsoid	mediawiki/extensions/MobileFrontend	master	+2 -1

Customize query in gerrit

Related Objects

Mentioned In: T414050: Investigate performance regression 2025-12-18 on it.wikipedia.org
T408875: [SPIKE] Kartographer uses MobileFrontend hook for section expansion, not applying to Parsoid

Event Timeline

Jdlrobson-WMF created this task.Jan 9 2026, 5:19 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 9 2026, 5:19 PM

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

[mediawiki/extensions/MobileFrontend@master] Fixes flash of unstyled content performance issue on tablet devices for parsoid

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

gerritbot added a project: Patch-For-Review.Jan 9 2026, 5:20 PM

Jdlrobson-WMF triaged this task as High priority.Jan 9 2026, 5:21 PM

Jdlrobson-WMF added a project: Readers Essential Work (WE6.3.4 Fix bugs within the reading experience across platforms for Parsoid Read Views).

Jdlrobson-WMF mentioned this in T408875: [SPIKE] Kartographer uses MobileFrontend hook for section expansion, not applying to Parsoid.Jan 9 2026, 5:24 PM

Jdlrobson-WMF mentioned this in T414050: Investigate performance regression 2025-12-18 on it.wikipedia.org.

Jdlrobson-WMF moved this task from Backlog to Blockers on the Readers Essential Work (WE6.3.4 Fix bugs within the reading experience across platforms for Parsoid Read Views) board.Jan 9 2026, 6:25 PM

@SherryYang-WMF @egardner it is possible to get this in the next sprint? Discovered while looking at the other task in the sprint and I've recommended a fix for this blocks further roll outs of Parsoid.

Jdlrobson-WMF updated the task description. (Show Details)Jan 9 2026, 6:31 PM

Change #1225008 had a related patch set uploaded (by SarthakSingh2904; author: SarthakSingh2904):

[mediawiki/extensions/MobileFrontend@master] mobilefrontend: Fix Parsoid content reflow on tablets

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

Change #1224996 abandoned by Jdlrobson:

[mediawiki/extensions/MobileFrontend@master] Fixes flash of unstyled content performance issue on tablet devices for parsoid

Reason:

See https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/1225008

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

Jdlrobson-WMF moved this task from Blockers to Tracking on the Readers Essential Work (WE6.3.4 Fix bugs within the reading experience across platforms for Parsoid Read Views) board.Jan 9 2026, 11:54 PM

Change #1225008 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] mobilefrontend: Fix Parsoid content reflow on tablets

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

This needs QA.

Jdlrobson-WMF moved this task from Committed to QA on the Reader Growth Team (Sprint 1 (Jan 6 - Feb 3) Q3 25/26) board.Jan 12 2026, 5:41 PM

Maintenance_bot removed a project: Patch-For-Review.Jan 12 2026, 6:32 PM

egardner edited projects, added Reader Growth Team; removed Reader Growth Team (Sprint 1 (Jan 6 - Feb 3) Q3 25/26).Jan 12 2026, 6:58 PM

QA-ing now.

I can repro the issue on both the Wikivoyage link above as well as https://en.wikipedia.org/wiki/Bariloche?useparsoid=1 on EnWiki. Throttling the network connection helps.

Setting up a patchdemo to confirm that we have a fix.

Test wiki created on Patch demo by EGardner (WMF) using patch(es) linked to this task:
https://fb54c54fb1.catalyst.wmcloud.org/w/

QA report

Scenario: Navigate to a test page (needs to have multiple sections) on Wikipedia – I used https://en.wikipedia.org/wiki/Bariloche?useparsoid=1.

Must have ?useParsoid=1 param in the URL
Make sure to set viewport size to 900px wide
Make sure to click "mobile view" in the article footer
Throttle the network speed to "Good 3G" or similar to make it easier to see the section loading behavior

Behavior

On production Wikipedia, the sections start out as collapsed and then flash into expanded state, causing a lot of reflow
On the patchdemo instance with the proposed fix applied, sections begin in expanded state and don't reflow as the page loads:

See for yourself at: https://fb54c54fb1.catalyst.wmcloud.org/wiki/Bariloche?useparsoid=1

Summary
✅ QA successful, patch is good to ride the train

egardner edited projects, added Reader Growth Team (Sprint 1 (Jan 6 - Feb 3) Q3 25/26); removed Reader Growth Team.Jan 12 2026, 8:17 PM

egardner moved this task from QA to Signoff on the Reader Growth Team (Sprint 1 (Jan 6 - Feb 3) Q3 25/26) board.

egardner set the point value for this task to 1.