Page MenuHomePhabricator

FOUC in OOUIfied Special:Preferences
Closed, ResolvedPublic

Description

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.

Related Objects

Event Timeline

Esanders created this task.May 30 2018, 4:40 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 30 2018, 4:40 PM

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.

Vvjjkkii renamed this task from FOUC in special preferences OOUI due to oojs-ui-widgets.styles to 9ybaaaaaaa.Jul 1 2018, 1:06 AM
Vvjjkkii triaged this task as High priority.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed a subscriber: Aklapper.
CommunityTechBot renamed this task from 9ybaaaaaaa to FOUC in special preferences OOUI due to oojs-ui-widgets.styles.Jul 2 2018, 4:10 AM
CommunityTechBot raised the priority of this task from High to Needs Triage.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added a subscriber: Aklapper.

@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

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

matmarex added a comment.EditedJul 10 2018, 4:15 PM

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.

matmarex renamed this task from FOUC in special preferences OOUI due to oojs-ui-widgets.styles to FOUC in special preferences OOUI.Jul 10 2018, 4:21 PM

Change 444897 merged by jenkins-bot:
[mediawiki/core@master] mw.special.preferences: Prevent invisible accessibility hint from affecting content

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

@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

@Volker_E: I don't see the issue of font size changing. But yeah, I do see the page content move up and down after loading it, as @matmarex mentioned.

Change 458852 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/core@master] Prevent field margin FOUC when loading OOUI special:preferences

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

Change 458852 merged by jenkins-bot:
[mediawiki/core@master] Prevent field margin FOUC when loading OOUI Special:Preferences

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

Seems like the original issue, and the follow-up vertical jump have been fixed.

@Ryasmeen Your QA verification, please!

Volker_E renamed this task from FOUC in special preferences OOUI to FOUC in OOUIfied Special:Preferences.Sep 7 2018, 7:08 PM
Volker_E triaged this task as High priority.

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 Can't reproduce this.

@Ryasmeen Can't reproduce this.

@Volker_E: Will show you the issue tomorrow :)

Volker_E closed this task as Resolved.Sep 11 2018, 8:51 PM
Volker_E assigned this task to matmarex.

@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.

Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptSep 11 2018, 8:51 PM