After enabling $wgMFSiteStylesRenderBlocking = true; I started receiving inconsistent styling on the page. Sometimes, MediaWiki:Common.css was being loaded on the mobile site (which shouldn't), and sometimes MediaWiki:Mobile.css was being loaded on desktop site.
After a lot of digging, surprisingly, I found the culprit was a load.php URL that was loading the CSS of the site. The output was one or the other depending on the presence of the mf_useformat cookie, that determines if it should render the mobile skin or desktop. The URL is similar to:
http://dev.wiki.local.wmftest.net:8080/w/load.php?lang=en&modules=site.styles&only=styles&skin=minerva&version=asda8
That URL has a Cache-control: public, max-age=300, s-maxage=300 response header, which means the same user switching from mobile to desktop may get inconsistent styles, and if there's a frontend cache, it may cache wrong responses.
Steps to reproduce
- Use MediaWiki-vagrant to set up a test site, enabling mobilefrontend and minerva roles.
- Add a settings.d/99-misc.php file with this contents:
<?php $wgMFSiteStylesRenderBlocking = true;
- Open the wiki on a browser, login, and edit the [[MediaWIki:Common.css]] page, adding:
.commoncss{border:2px solid red;background:yellow;color:darkblue}
- Edit the [[MediaWIki:Mobile.css]] page, adding:
.mobilecss{border:2px solid green;background:darkblue;color:yellow}
- Create a [[Test]] page, adding:
<div class="commoncss">Styles from common.css</div> <div class="mobilecss">Styles from mobile.css</div>
- Open the URL http://dev.wiki.local.wmftest.net:8080/w/load.php?lang=en&modules=site.styles&only=styles&skin=minerva&version=v1 on a new tab. It should display contents from step 3
- Click on the "mobile view" link in the footer
- Open the URL http://dev.wiki.local.wmftest.net:8080/w/load.php?lang=en&modules=site.styles&only=styles&skin=minerva&version=v2 (note the different version) on a new tab. It should display contents from step 4
(un)Expected results
A ResourceLoader URL that's not user-private, should be cacheable and fairly static, and depend only on its params. This one seems to depend on a cookie (set when manually switching to mobile view from a desktop browser or viceversa), which causes issues when this URL is cached.
The mobile site should load a different RL module for its site CSS, to prevent the described problems.
Additional info
I don't know why, but this seems to be reproduced more easily on the browser when you also set $wgMFAutodetectMobileView = false;, you deactivate the cache of your browser, and use the useformat=desktop or useformat=mobile parameters on the URL to view the page on the desktop/mobile view without actually switching.
Also, it's somehow reproducible even if $wgMFSiteStylesRenderBlocking = false (the default), if you manually load the URLs, but from my tests it's hardly reproducible on a browser, maybe because it uses more distinct URLs between desktop and mobile.
This is also reproducible using the REL1_35 branch.