FOUC in section "Recently featured" on mobile Main Page
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Krinkle
	Apr 1 2016, 3:09 AM

Description

https://en.m.wikipedia.org/wiki/Main_Page

The first render is like this (on two separate line, each item on the second line separated by white space):

Recently featured:
Jumping Flash! Benjamin Franklin Tilley The Boat Race 1993

Then, once loaded, it changes to this (all on one line, items separated by bullet point):

Recently featured: Jumping Flash! · Benjamin Franklin Tilley · The Boat Race 1993

Screen Shot 2016-03-31 at 06.08.14.png (1×2 px, 506 KB)

Screen Shot 2016-03-31 at 06.08.15.png (1×2 px, 601 KB)

It seems related to the "hlist" class on English Wikipedia. Either the style load too late, or the layout is needlessly changed by JavaScript in some way.

Details

	Subject	Repo	Branch	Lines +/-
	Support inline `.hlists` for editors to avoid FOUC	mediawiki/extensions/MobileFrontend	master	+7 -0

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Declined		None	T125920 [EPIC] Future exciting reading web performance endeavours
Resolved		Jdlrobson	T131423 FOUC in section "Recently featured" on mobile Main Page
Duplicate		None	T126137 FOUC for styles applied via MediaWiki:Mobile.css due to bottom-loading
Resolved		Tgr	T133410 Deploy TemplateStyles to WMF production
Resolved		Anomie	T133414 Deploy TemplateStyles to the beta-cluster
Resolved		• tstarling	T133408 Security review of TemplateStyles
Resolved		coren	T133409 Complete initial version of TemplateStyles sufficient to do security review and then deploy it to WMF production
Resolved		Anomie	T135788 TemplateStyles should support media queries
Declined	BUG REPORT	None	T138343 [BUG] Certain Articles can Scroll Left & Right
Resolved		Anomie	T136054 TemplateStyles puts css in page_props table, which might be subject to race conditions, etc
Resolved		Esanders	T164790 Add class mw-parser-output to VE's editing area
Resolved		Esanders	T164791 Add class mw-parser-output to Flow comment- or content- containing elements
Resolved		ssastry	T164792 Add class mw-parser-output to Parsoid's output
Resolved		Anomie	T167349 Tidy on WMF sites removes `<style>` tags
Resolved		CKoerner_WMF	T170863 Identify and coordinate deployment of initial deployment of Template Styles with select non-content Wikis
Resolved		jhsoby	T176082 Deploy TemplateStyles to svwiki
Resolved		Tgr	T176268 Feature flag ("kill switch") for TemplateStyles
Declined		Tgr	T176269 Disallow <templatestyles> tags in non-Template namespaces
Resolved		coren	T483 RfC: Allow styling in templates
Resolved		Anomie	T989 CSS validator survey and design work
Resolved		Tgr	T188198 Enable TemplateStyles on ruwiki on 2018-04-10
Declined		None	T187141 Deduplicate template styles in mobileviews API
Resolved		ssastry	T187142 Deduplicate template styles in Parsoid
Resolved		Tgr	T189022 Deploy TemplateStyles to zhwiki on 2018-07-19
Resolved		Tgr	T190910 Create and deploy configuration change to enable TemplateStyles on German Wikipedia on 2018-04-04
Resolved		Tgr	T191612 Make the creation of CSS pages with TemplateStyles work more sensibly on the German Wikipedia
Resolved		• Deskana	T189834 [Epic] Deploy TemplateStyles to Wikivoyages
Resolved		CKoerner_WMF	T189835 Write announcement for TemplateStyles deployment to Wikivoyages
Resolved		• Whatamidoing-WMF	T189836 Set deployment date for TemplateStyles on Wikivoyages, and publish announcement
Resolved		Tgr	T189838 Create and deploy configuration change to enable TemplateStyles on Wikivoyages on 2018-03-28
Resolved		Tgr	T191452 Deploy TemplateStyles on French Wikipedia on 2018-07-19
Resolved		Tgr	T193786 [task] Configure TemplateStyles for nowiki
Resolved		Urbanecm	T197526 TemplateStyles in the Russian Wikiquote
Resolved		Tgr	T197603 Deploy TemplateStyles to the English Wikipedia on 2018-07-19
Resolved		Tacsipacsi	T198725 Deploy TemplateStyles on huwiktionary
Resolved		Tgr	T199909 Deploy TemplateStyles everywhere on 2018-08-09
Resolved		CKoerner_WMF	T199982 Announce that TemplateStyles is being deployed everywhere with mass messages

Event Timeline

Krinkle created this task.Apr 1 2016, 3:09 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 1 2016, 3:09 AM

Krinkle updated the task description. (Show Details)Apr 1 2016, 3:10 AM

Jdlrobson added a subtask: T483: RfC: Allow styling in templates.Apr 5 2016, 10:25 PM

Jdlrobson added a subtask: T126137: FOUC for styles applied via MediaWiki:Mobile.css due to bottom-loading.

Jdlrobson triaged this task as Medium priority.Apr 6 2016, 5:14 PM

Jdlrobson removed a parent task: T126825: Sections on mobile views jumps around after load (FOUC).Apr 20 2016, 8:37 PM

Jdlrobson added a parent task: T125920: [EPIC] Future exciting reading web performance endeavours.

MBinder_WMF added a project: Web-Team-Backlog.May 17 2016, 6:31 PM

• Jhernandez moved this task from Incoming to Triaged but Future on the Web-Team-Backlog board.May 18 2016, 3:38 PM

• Jhernandez moved this task from Triaged but Future to Needs Prioritization on the Web-Team-Backlog board.

• jhobs renamed this task from Section "Recently featured" on mobile Main Page changes layout after page load to FOUC in section "Recently featured" on mobile Main Page.Sep 29 2016, 8:26 PM

@Jhernandez Grooming determined that this is ready to be worked on. Please feel free to move it back to Needs Analysis and say why if you do. :)

MBinder_WMF unsubscribed.Sep 29 2016, 8:35 PM

Change 324002 had a related patch set uploaded (by Jdlrobson):
Support inline .hlists for editors to avoid FOUC

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

gerritbot added a project: Patch-For-Review.Nov 29 2016, 1:11 AM

These rules are in https://en.m.wikipedia.org/wiki/MediaWiki:Mobile.css which is bottom loaded
(mainly to avoid a 2 second delay to first paint on 2G connections by the addition of an additional stylesheet URL)

The FOUC content will be resolved by the above patch.
I've fixed the issue with the bullet points FOUC. Currently the bullets are removed but I've left information on how they can be readded without a FOUC (requires an edit to main page template).

• bmansurov added projects: Reading-Web-Sprint-87-♨️😭, Unplanned-Sprint-Work.Dec 14 2016, 1:56 PM

ovasileva moved this task from Needs Analysis to Code Review on the Reading-Web-Sprint-87-♨️😭 board.Dec 14 2016, 8:55 PM

Jdlrobson claimed this task.Dec 15 2016, 4:15 PM

Krinkle mentioned this in T153390: FOUC: dablink rendered too narrow.Dec 16 2016, 1:26 AM

Change 324002 abandoned by Jdlrobson:
Support inline .hlists for editors to avoid FOUC

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

ovasileva moved this task from Triaged but Future to Upcoming on the Web-Team-Backlog board.Dec 19 2016, 5:16 PM

MBinder_WMF removed a project: Unplanned-Sprint-Work.Dec 19 2016, 5:21 PM

Jdlrobson removed a project: Patch-For-Review.Jan 3 2017, 10:04 AM

• MZMcBride subscribed.Jan 3 2017, 10:10 AM