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

[mediawiki/skins/Vector@master] Work around browser inconsistencies with 'clear' + 'margin-top'

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

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/b512ddb345/w

Change 870899 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Work around browser inconsistencies with 'clear' + 'margin-top'

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Coordinates should not overlap other elements on the page.
This passes, but I'm not sure Beta is a good test environment for it given the category Coordinates is not on Wikidata in beta. The sites mentioned above will be tested on the prod wikis. I have confirmed they are currently not displaying correctly in prod.

@matmarex could you please advise? I'm not actually seeing any difference before or after this change, and the overlapping is definitely still a problem, but perhaps that was not the goal here (the goal instead being "consistency")? It also looks like the Chromium bug has been closed as WONTFIX.

Indeed the goal was only consistency between Chrome and Firefox, and not yet fixing the overlapping. Previously, when overlapping only occurred on one of these two browsers, it was impossible to fix the appearance in one without breaking the other. Now that overlapping occurs (or doesn't occur) in the same way in both of these two browsers, it can be resolved with on-wiki CSS fixes. I'll try to make those fixes for them at some point.

I think this is the set of pages to review and potentially fix. It may not be a complete list, but it's as complete as it's practical to make it, and it includes all of the affected wikis I found manually when filing this bug. These are the site styles applying to Vector 2022 that style #coordinates with a negative top value:

https://global-search.toolforge.org/?q=%5C%23coordinates%5B%5E%5C%7D%5D*%5B%5E%5C-%5Dtop%5C%3A+%3F%5C-&regex=1&namespaces=8&title=Vector%5C.css%7CVector-2022%5C.css%7CCommon%5C.css

I reviewed the pages and edited some of them.

In most cases it looked like the coordinates were meant to be placed below the page tabs, so I used top: 0 (although this conflicts with the location of indicators, but I'll leave that to be resolved in T281974).

For code in MediaWiki:Common.css and MediaWiki:Vector.css, I added .skin-vector-2022 instead of creating MediaWiki:Vector-2022.css, to make the change easier to review for the maintainers on each wiki, and to make it easier to delete later if those wikis are migrated to use page indicators in the course of T281974.

The FlaggedRevs rating box is broken on huwiki (https://hu.wikipedia.org/w/index.php?title=4_Vesta&useskin=vector-2022&uselang=en, try to hover over [review pending changes] in the indicator area – the bottom 90% of the dropdown is cut off, only a tiny bit of the border is visible), and I think it’s broken by this (I don’t use new Vector, so I discovered this accidentally, but from what I see in the CSS rules, this task seems to be the culprit). What should I do? Huwiki heavily customized the rating box in Vector.css and Vector.js to achieve something like T197912, so I’m not surprised it’s broken, but overriding even more things probably just breaks something else. The best solution would be if someone volunteered resolving T197912 and I could remove the local customization, but it doesn’t sound like a probable scenario given the number of people who actively work on FlaggedRevs…

For reference:

Current	Expected

Yes, that is related to the use of .vector-body-before-content { overflow: hidden; } in my patch.

You could override it on-wiki with .vector-body-before-content { overflow: visible; display: flow-root; }. It will have the exact same effect on the flow of elements and positioning, but without cutting off elements. I didn't use it in my patch to make it easier to understand and maintain, since it's a relatively unknown CSS property, and because it's not supported in IE 11.

You already have a similar workaround for the original Vector skin: https://hu.wikipedia.org/wiki/MediaWiki:Vector.css#L-8

edit: I added the workaround: https://hu.wikipedia.org/w/index.php?title=MediaWiki:Vector.css&diff=prev&oldid=25914421