Hat-note FOUC on mobile skin
Closed, DuplicatePublic
Actions

Assigned To

None

Authored By

	ori
	Mar 24 2016, 5:30 PM

Description

For example, on https://en.m.wikipedia.org/wiki/Word . The hatnote is first rendered with a left margin that is flush with the rest of the body text, but then it is indented:

Related Objects
Search...

Status	Subtype	Assigned	Task
Declined		None	T125920 [EPIC] Future exciting reading web performance endeavours
Duplicate		None	T130846 Hat-note FOUC on mobile skin
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

ori created this task.Mar 24 2016, 5:30 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 24 2016, 5:30 PM

ori added a subscriber: Performance-Team.Mar 24 2016, 5:45 PM

It seems this is due to some css in https://en.m.wikipedia.org/wiki/MediaWiki:Mobile.css

There's no reason for this to be inside MediaWiki:Mobile.css and MediaWiki:Common.css

I would suggest moving the margin and padding rules to the template module itself - https://en.m.wikipedia.org/wiki/Special:MobileDiff/711777560

I temporarily disabled the css rule for the time being given it is highly noticeable. I will cleanup once we've fixed it in the template.

Yes, lets move all CSS inline to the templates... I think not. Why shouldn't the loading of Mobile.css be fixed instead?

dr0ptp4kt triaged this task as Medium priority.Mar 28 2016, 5:14 PM

Top loading the styles in Mobile.CSS will introduce another HTTP request and lead to a hit on first paint and overall page view performance so we should explore this carefully.

In the current implementation, as used by Vector, the CSS is broken out into a separate HTTP request for caching reasons. We should re-evaluate this as Vector would also benefit from having these CSS shipped in a single request.

Looking through the existing rules in MediaWiki:Mobile.css none of them with the exception of the hatnote rule need to be top loaded.

Hopefully, we'll have some bandwidth soon to investigate this. The RFC will alleviate most of these problems.

• RobLa-WMF mentioned this in T483: RfC: Allow styling in templates.Mar 30 2016, 6:24 AM

Jdforrester-WMF removed a parent task: T483: RfC: Allow styling in templates.Apr 7 2016, 10:22 PM

Jdforrester-WMF added a subtask: T483: RfC: Allow styling in templates.

Krinkle added a parent task: T126825: Sections on mobile views jumps around after load (FOUC).Apr 8 2016, 8:50 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

It doesn't seem reasonable to block this on T483. T483 may be a blocker an ideal solution, but this problem is sufficiently annoying to merit a nonideal solution, if that is the best we can do.