Page MenuHomePhabricator

PHP and JS DropdownInputWidgets have different dimensions (FOUC for the namespace selector dropdown on Special:MovePage)
Closed, ResolvedPublic

Description

  1. Go to https://www.mediawiki.org/wiki/Special:MovePage/Sandbox

Observed: Flash of unstyled content for the namespace selector each time the page is reloaded
Expected: It shouldn't happen each time.

Browser: FF40 on Ubuntu

Event Timeline

Glaisher raised the priority of this task from to Needs Triage.
Glaisher updated the task description. (Show Details)
Glaisher subscribed.

Is this possible? Would need us to build the select widget in styled HTML, which… isn't possible for non-JS clients or something?

It's almost impossible to provide a dropdown looking identically to the one we generate with JavaScript, that also actually works, without JavaScript. (We haven't quite rolled out the heavy CSS artillery here, but it would require a lot of fiddling.)

Although, I looked carefully took some screenshots and this looks a bit worse than I thought it does: the height of the dropdown actually changes with JS, shifting the rest of the page down, which is definitely not supposed to happen (and I think it wasn't happening the last time I tested this).

Before flashAfter flash
pasted_file (948×1 px, 189 KB)
pasted_file (948×1 px, 187 KB)

I'll look into ensuring that the no-JS and JS dropdowns have the exact same dimensions.

matmarex renamed this task from FOUC for the namespace selector dropdown on Special:MovePage to PHP and JS DropdownInputWidgets have different dimensions (FOUC for the namespace selector dropdown on Special:MovePage).Sep 25 2015, 1:35 PM
matmarex claimed this task.
matmarex triaged this task as Medium priority.
matmarex added a project: OOUI.
matmarex set Security to None.

Change 242530 had a related patch set uploaded (by Bartosz Dziewoński):
MediaWiki theme: Make PHP DropdownInputWidget look closer to JS version

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

The flash should become nearly imperceptible with the patch above. (How imperceptible depends on how close your browser's and OS's dropdowns are to OOjs UI's, but the dimensions at least should stay the same.)

Change 242530 merged by jenkins-bot:
MediaWiki theme: Make PHP DropdownInputWidget look closer to JS version

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

The change has been merged and will be deployed to Wikimedia wikis… at some point. In the future. Soon.