There are multiple font-size changes when the page is loading. We load 'oojs-ui-widgets.styles' synchronously on Special:Preferences, and this appears to be the culprit, because if I remove 'oojs-ui-widgets.styles' from the 'oojs-ui-widgets' module, this FOUC goes away.
Description
Details
Event Timeline
I can reproduce this in Chrome and Firefox, but only when I have developer tools open.
I don't know why this would happen. Perhaps we're just shipping too much CSS and we're hitting some limit where the browser decides to apply the CSS it has parsed so far before parsing the rest? I don't know what we could do here, besides shipping less CSS (e.g. just copy-pasting the parts we need to display the fake PHP tabs).
It looks super funny because of .oo-ui-menuLayout > .oo-ui-menuLayout-menu, .oo-ui-menuLayout > .oo-ui-menuLayout-content { transition: all 200ms ease; } – so when the rule .mw-body-content { font-size: 0.875em; } is applied, the font size the entire preferences form animates from 1em to 0.875em. That's why it looks like it changes multiple times, but in reality I'm pretty sure it changes just once. And .mw-body-content { font-size: 0.875em; } loads late because it's part of the 'skins.vector.styles' module, which happens to be alphabetically the last one.
@Ryasmeen This has been improved by @matmarex and made it into OOUI v0.27.2. Would you compare the task description with current implementation on https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Special:Preferences&ooui=1
To be specific, the relevant patch was rGOJUb6b931e8dff4: MenuLayout: Avoid `transition: all`, be precise, I didn't tag it with this task because I didn't expect it to actually help much. But I don't see the annoying font-size changes anymore, so perhaps it did…
I can't reproduce the original issue with older versions of the code now, either, so I think it must have been fixed by something unrelated.
Change 444897 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/core@master] mw.special.preferences: Prevent invisible accessibility hint from affecting content
The page still visibly shifts around twice while loading (this is after my patch above).
→ | → | |||
That looks like several different issues. One of them is filed as T193731, I don't know what causes the others.
Change 444897 merged by jenkins-bot:
[mediawiki/core@master] mw.special.preferences: Prevent invisible accessibility hint from affecting content
Change 458852 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/core@master] Prevent field margin FOUC when loading OOUI special:preferences
Change 458852 merged by jenkins-bot:
[mediawiki/core@master] Prevent field margin FOUC when loading OOUI Special:Preferences
It looks like we accidentally worked around T193731 with commit f2a83fe4ac1c603b7f70d12566e5f8e9bcba1bcd. These fields are no longer auto-infused, so the bug where their spacing changes no longer affects us (at least on the initial load). So I guess this is fixed.
I still see a small problem with the ULS "More language settings" link, which seems to shift the page by 1px after it appears (it's worse in non-OOUI preferences). I submitted https://gerrit.wikimedia.org/r/c/mediawiki/extensions/UniversalLanguageSelector/+/458892 for that. It's not really a blocker though.
@Volker_E: I don't see the issue of vertical jump anymore. So that part is fixed. However, I am noticing now a horizontal movement of the content ever so slightly as I reload the page.
Here is a screen capture.
@Ryasmeen @Jdforrester-WMF and myself narrowed the horizontal shift down to a Vector behaviour when scrollbars are appearing and has been the case before. With that we'll file a task and this can be set to “resolved” successfully.