| Raymond | |
| Aug 19 2022, 9:12 PM |
| F35724874: Screenshot from 2022-11-08 19-27-23.png | |
| Nov 9 2022, 12:30 AM |
| F35724821: test-wikipedia-z-index.jpg | |
| Nov 9 2022, 12:22 AM |
| F35723926: image.png | |
| Nov 8 2022, 10:50 PM |
| F35565745: error_popup_zindex.png | |
| Oct 13 2022, 9:47 AM |
| F35565160: Screenshot from 2022-10-12 16-24-14.png | |
| Oct 12 2022, 8:33 PM |
| F35495096: image.png | |
| Aug 29 2022, 7:35 PM |
| F35495090: image.png | |
| Aug 29 2022, 7:35 PM |
| Restricted File | |
| Aug 29 2022, 12:16 PM |
Steps to replicate the issue (include links if applicable):
What happens?:
The More dropdown is below the editing toolbar
What should have happened instead?:
The More dropdown should be shown over the editing toolbar
See also the duplicate T320632
.wikiEditor-ui-toolbar { z-index: 7; }
.vector-menu-dropdown .vector-menu-content { z-index: 3; }
When I add safemode=1 to the URL, the menu works as expected. So the issue must be due to some incompatibility with a gadget turned on by default for everyone/all logged-in users.
| With safemode | With gadgets enabled |
|---|---|
| {F35494195 width=400} | {F35494196 width=400} |
The problematic CSS rule is coming from CodeMirror:
https://gerrit.wikimedia.org/g/mediawiki/extensions/CodeMirror/+/cd41e36122fe5c0e484575cc195c04b9ab32c571/resources/ext.CodeMirror.less#27
I guess this is being loaded by a user gadget?
Using high z-indexes like this are likely to cause issues. I'm not sure why this rule is necessary, but it the cheapest fix here is to add .wikiEditor-ui { z-index: 1; } to its container element.
Untagging as this is not a readers web bug.
This is the 2010 editor, which is the default editing toolbar these days, not a user gadget.
I'm not sure why this rule is necessary
It looks like without it, the CodeMirror editor scrollbar would appear on top of the dropdown. (And also the shadow of the toolbar would disappear.)
| Correct | Without the z-index rule |
|---|---|
 |  |
So presumably it just needs .wikiEditor-ui { z-index: 1; }.
I'm not setup with this extension but let me know if I can help in any way.
We discussed this in Triage and could not definitely tell that this belonged to us since it's undetermined if it's Code Mirror.
We are not worried about the fix, but about what could be broken as a result and QA.
We will not be dragging it into our backlog till we have more clarity.
The problematic CSS rule is definitely coming from CodeMirror:
https://gerrit.wikimedia.org/g/mediawiki/extensions/CodeMirror/+/cd41e36122fe5c0e484575cc195c04b9ab32c571/resources/ext.CodeMirror.less#27
T320632 appears to be the same issue. As Jdlrobson says, it's apparently CodeMirror that's at fault. If I remove that problematic rule, both bugs are fixed. At any rate, I'm able to repro in old Vector as well as 2022 so untagging as such.
Ugh, I just did all that moving around of tasks only to uncover that T320632 does have a distinct issue, in addition to the one described here:
Notice the text within the editor is above the popup. This is with the z-index rule in CodeMirror removed (hence why the popup is correctly above the toolbar). I think it's still a CodeMirror issue though, as if I turn off CodeMirror everything looks fine. I'm able to add z-index: 3 to .ext-phonos-error-popup (part of MediaWiki-extensions-Phonos) and that fixes it, but I feel like we shouldn't have to do that and there's still something off in CodeMirror? I know it uses an invisible overlay to display the syntax highlighting, so perhaps some level of z-indexing is needed, but I don't think everything else should have to adapt around CodeMirror. Note also T259059 is on the horizon (1-3 months) which may or may not incidentally fix the issue.
@MusikAnimal I can reproduce a similar issue without CodeMirror:
See, for example, https://en.wikipedia.beta.wmflabs.org/wiki/Foobar?uselang=en&useskin=vector
In old vector, navigation sidebar elements are absolutely positioned with a logical dom order that is later than the content. As such, they are always 'higher' in the visual order and the sidebar overlaps the widget.
In the editor, this phonos popup is overflowing its container, thats why it is behind the editor. Setting the z-index lifts it up, but there are more elements in the editor that have special positioning, so it just becomes a bit of a mess.
I worked with @HMonroy on this and apparently this specific issue with CodeMirror has resolved itself? Nothing related has changed in CodeMirror, so we suspect a change to Vector fixed it.
Closing as resolved, please re-open if anyone is able to still reproduce.
The confusingly similar but different issue with the Phonos popups (T315700#8313687) still stands and will be handled in a different task.
I still see the issue when using Vector 2022: https://de.wikipedia.org/w/index.php?title=Emmerich&action=edit&useskin=vector-2022
Hi @matmarex! We are trying to figure out if this is related to https://gerrit.wikimedia.org/g/mediawiki/extensions/CodeMirror/+/cd41e36122fe5c0e484575cc195c04b9ab32c571/resources/ext.CodeMirror.less#27 but I'm not able to replicate it in test.wikipedia
That still looks wrong on my end too, but I can't repro on other wikis.
If I load the same page on dewiki in safemode everything seems okay:
Does it work for you in safemode? https://de.wikipedia.org/w/index.php?title=Emmerich&action=edit&useskin=vector-2022&safemode=1
You're right, my bad for believing the earlier comments that blamed CodeMirror.
It's caused by position: static in this rule: https://de.wikipedia.org/wiki/MediaWiki:Vector.css#L-20
/* +++++ Anpassungen für absolut positionierte Objekte: [[phab:T40848]] +++++ */ /* * Die folgenden Regeln ändern den Bezugsrahmen für absolut positionierte * Elemente von .mw-body-content nach .mw-body und gleichen in diesem Sinne den * Vector-Skin an den Monobook-Skin an, um die von dort „bewährte“ Koordinaten- * position über der SiteNotice zu ermöglichen. * Dies hat schädliche Auswirkungen, unter anderem bewirkt es, dass der Bereich * des Moduls „mw.notify“ für „bubbles“ viel zu weit unten angezeigt wird, vgl. * [[phab:diffusion/SVEC/browse/master/skinStyles/mediawiki.notification.less]] */ .mw-body { position: relative; z-index: 0; /* [[phab:T40848]] */ } #bodyContent { position: static; }