Implementing solution 1 from T147338: Prototype solutions to avoid FOUC on section collapse
When loading a MobileFrontend page on my phone, the content is visible for a few seconds, and then the page loads and the following things happen:
The watch star appears below the edit (pencil) icon. [captured in blocking bug]FIXED The search box changes from being empty to containing a "Search Wikipedia" placeholder. [captured in blocking bug]FIXED
- All sections are collapsed.
Video of loading an MF page in portrait mode:
(Google Chrome simulating a Nexus 5 with network throttling set to regular 3G)
Video of loading that same page in portrait mode, but scrolling before loading finishes:
Note how the collapsing of all sections interrupts reading.
Video of loading that same page in landscape mode:
Note how the appearance of the watch star causes the first paragraph to reflow, pushing down the rest of the content a bit.
- Go to https://en.m.wikipedia.beta.wmflabs.org/wiki/Barack_Obama on a mobile browser
- Scroll up and down through the article making a note of how section headers appear
- Ensure sections are collapsed by default
- Note if flashed of unstyled content or other issues appear on page (or while collapsing/uncollapsing sections)