Page MenuHomePhabricator

oo-ui-windowManager-floating broken on Timeless
Closed, ResolvedPublicBUG REPORT

Description

Reported by JoeNMLC at https://en.wikipedia.org/wiki/User_talk:Evad37/rater.js#Rater_broken_-_November_9%2C_2023

Steps to replicate the issue (include links if applicable):

What happens?:

  • Modal is mostly off the page and scrunched together. Barely overflows onto the page in the bottom left.

image.png (341×384 px, 10 KB)

What should have happened instead?:

  • Modal appears front and center, and elements are spaced out.

image.png (775×1 px, 77 KB)

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

  • Worked until recently so this is a Regression
  • Turning off body > .oo-ui-windowManager {position: absolute;} in browser fixes it
  • Here's the HTML code for the modal: <div class="oo-ui-windowManager oo-ui-windowManager-modal oo-ui-windowManager-floating oo-ui-windowManager-size-large">

Event Timeline

Probably somehow caused by my changes in T348287 and T350544.

The CologneBlue skin is also affected (I checked them all out of curiosity).

As far as I know, no other gadget is affected, so I wanted to see what in rater.js causes this. The broken styling seems to be a result of this line: https://github.com/evad37/rater/blob/2bb3b81d097f38c0e198928d08e6b1e1ffd32ac5/rater-src/css.js#L39

I don't understand what this position: static; is supposed to do. On the skins where it isn't broken, as far as I can tell, all it does is hide the background in a very roundabout way. Can it be replaced with background: none;?

@Evad37, thoughts on the above suggested change to Rater?

Probably somehow caused by my changes in T348287 and T350544.

The CologneBlue skin is also affected (I checked them all out of curiosity).

As far as I know, no other gadget is affected, so I wanted to see what in rater.js causes this. The broken styling seems to be a result of this line: https://github.com/evad37/rater/blob/2bb3b81d097f38c0e198928d08e6b1e1ffd32ac5/rater-src/css.js#L39

I don't understand what this position: static; is supposed to do. On the skins where it isn't broken, as far as I can tell, all it does is hide the background in a very roundabout way. Can it be replaced with background: none;?

position: static; is preventing the window from moving when the scrolling the page, at least on Vector 2010.

Change 975405 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/skins/Timeless@master] Tweak OOUI dialog compatibility styles for better compatibility

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

Change 975406 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/skins/CologneBlue@master] Tweak OOUI dialog compatibility styles for better compatibility

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

I still think that this is really a problem with the gadget, caused by doing something very weird, but it turns out to be easy enough to work around.

Note that after these changes, it becomes possible to drag the gadget's window behind Timeless's top bar. This is a pre-existing bug in the gadget, also caused by doing the same weird thing.

image.png (2×3 px, 590 KB)

Change 975407 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/skins/Vector@master] Tweak OOUI dialog compatibility styles for better compatibility

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

Change 975407 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Tweak OOUI dialog compatibility styles for better compatibility

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

Change 975405 merged by jenkins-bot:

[mediawiki/skins/Timeless@master] Tweak OOUI dialog compatibility styles for better compatibility

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

Change 975406 merged by jenkins-bot:

[mediawiki/skins/CologneBlue@master] Tweak OOUI dialog compatibility styles for better compatibility

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

matmarex claimed this task.

The changes will be deployed to Wikimedia wikis next week, per the usual schedule.