Page MenuHomePhabricator
Create Task
Maniphest T400474

z-index/stacking contexts: Tooltips in GrowthExperiments:ImpactModule & WikiEditor disappear under Tools sidebar in Vector 2022
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To
None
Authored By
Samwalton9-WMF
Jul 25 2025, 1:14 PM
Tags
Referenced Files
F65789508: Screenshot 2025-08-19 at 17.10.33.png
Aug 19 2025, 4:10 PM
F65789415: CleanShot 2025-08-19 at 10.57.29@2x.png
Aug 19 2025, 3:58 PM
F65686461: screenshot2.png
Jul 28 2025, 3:42 PM
F65686459: screenshot1.png
Jul 28 2025, 3:42 PM
F65673316: image.png
Jul 25 2025, 6:00 PM
F65672194: image.png
Jul 25 2025, 1:14 PM
Subscribers
A_smart_kitten
Aklapper
DLynch
Esanders
IBerker-WMF
Jdrewniak
matmarex
View All 13 Subscribers

Description

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

  • When clicking the (i) information buttons in the Impact module, the text disappears behind the Tools sidebar in Vector 2022.
  • When switching between WikiEditor and VisualEditor, the notification tooltip is obstructed by the Tools sidebar.

What happens?:

image.png (1×1 px, 248 KB)

screenshot2.png (286×487 px, 19 KB)

screenshot1.png (261×551 px, 14 KB)

What should have happened instead?:

The tooltips should appear "on top" of the Tools menu.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

This bug was introduced in the following patch in Vector: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1133270
as a fix for T390802 . This approach should either be reverted or revised.

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Revert "Draw sidebars on top of body text to fix subpixel text rendering"mediawiki/skins/Vectormaster+0 -2
Customize query in gerrit

Related Objects

Event Timeline

Samwalton9-WMF created this task.Jul 25 2025, 1:14 PM
Restricted Application added a project: Growth-Team. · View Herald TranscriptJul 25 2025, 1:15 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Michael added subscribers: Sgs, Volker_E, Michael.Jul 25 2025, 6:00 PM

The cause here is that both Vector's right-hand column with the Appearance menu, and the vector-body with the popover, are each creating a stacking-context (mdn explainer) with their respective sibling root-elements (see screenshot) by both defining a grid-rule and a z-index that is not auto. In particular, the vector-body has z-index of 0, and the right-hand column has a z-index of 1. That means that the right hand-column has a whole will always be above the body as a whole, regardless of the z-index of the elements inside of them.

image.png (85×794 px, 28 KB)

I'm cc'ing @Volker_E and @Sgs, because this is yet another z-index issue, though this time in the new Vector 2022 skin.

Michael renamed this task from Information tooltips in Impact module disappear under Tools sidebar in Vector 2022 to z-index/stacking contexts: Information tooltips in Impact module disappear under Tools sidebar in Vector 2022.Jul 25 2025, 6:01 PM
Michael moved this task from Inbox to Triaged on the Growth-Team board.Jul 25 2025, 6:08 PM
Michael added a project: Reader Experience Team.

That being said, there is little that Growth can do here¹, so I'm moving it to Triaged. I'm also tagging the Reader Experience Team who is probably owning Vector-2022 now? Though, I don't expect this to be high priority.

¹ (We could maybe attach that popover to the end of <body> and that should make it work, but that feels more like a hack by now. Why do the vector-body and that right-hand column have z-indexes in the first place anyway?)

A_smart_kitten added a project: VisualEditor.Jul 25 2025, 6:22 PM
A_smart_kitten subscribed.

I've noticed this affecting VisualEditor-related popups. Steps to reproduce:

  • Open a page in (non-2017-wikitext-editor) source editing mode.
  • Click the pencil icon at the top-right of the text-area (to open the dropdown to switch to VisualEditor). For me, this dropdown is partially obscured by the V2022 sidebar.
  • Switch to VisualEditor, and then switch back. The "you have switched to source editing" popup is partially obscured by the V2022 sidebar.

(apologies, can't attach any screenshots right now!)

DLynch subscribed.Jul 25 2025, 7:43 PM

We're already hiding them in VE if you have any chance of encountering an edit check, because they greatly interfere with our sidebar for that. We do have a task for just expanding that to all uses of VE, though: T380336.

We were hoping that Web would do something about T379444 to give us an API to do that, so that the sidebar/appearance stuff would just fold back into their collapsed in-a-menu states during this, rather than us having to make them completely inaccessible. However, since state updates on that ticket imply that it got deprioritized out of ever being planned to be worked on, and the Web team doesn't exactly exist in the same state any more, we might want to just go ahead with the more extreme hack version.

Jdrewniak triaged this task as Medium priority.Jul 28 2025, 12:39 PM
Jdrewniak moved this task from Incoming to Backlog on the Reader Experience Team board.
Jdrewniak subscribed.

Why do the vector-body and that right-hand column have z-indexes in the first place anyway?

@Michael that's a good question. Looking over the code it seems this z-index on .vector-body was ported over from legacy Vector when we first started working on this in 2020:
https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/Vector/+/e3a986f5872295f723c0bf1ec01a713a64ad0144
So to be honest I'm not sure if it's actually necessary at all.

@DLynch A public API for collapsing the menus was unfortunately deprioritized, but we are still actively maintaining Vector and we can revive that option if it's still necessary.

@A_smart_kitten can you post a screenshot of that issue when you're able to? Maybe a fix to this issue would include the scenario you describe.

Jdrewniak added a comment.Jul 28 2025, 12:46 PM

Looking at it some more I think this may have been introduced by T390802 which added the following to enable subpixel rendering in PinnableElement.less

.vector-column-start,
.vector-column-end {
	// Support: Chrome
	// Work around sticky-positioned layers disabling subpixel text rendering (T327460, T373066).
	// This must be applied to the possible parent elements of .vector-sticky-pinned-container.
	contain: paint;
	// Draw on top of body text, so that overlaps don't disable subpixel text rendering (T390802, T390803).
	z-index: 1;
}
A_smart_kitten added a comment.Jul 28 2025, 1:11 PM

It would make sense (to me) for this to be a recent regression, as I only remember starting to see the issue with the VE-popups fairly recently. (@Jdrewniak I'll try and get screenshots uploaded later!)

Jdrewniak added a project: Regression.Jul 28 2025, 1:16 PM
A_smart_kitten added a comment.Jul 28 2025, 3:42 PM

Screenshots as promised (cc @Jdrewniak):

In T400474#11035670, @A_smart_kitten wrote:

I've noticed this affecting VisualEditor-related popups. Steps to reproduce:

  • Open a page in (non-2017-wikitext-editor) source editing mode.
  • Click the pencil icon at the top-right of the text-area (to open the dropdown to switch to VisualEditor). For me, this dropdown is partially obscured by the V2022 sidebar.

screenshot1.png (261×551 px, 14 KB)

  • Switch to VisualEditor, and then switch back. The "you have switched to source editing" popup is partially obscured by the V2022 sidebar.

screenshot2.png (286×487 px, 19 KB)

A_smart_kitten added a subscriber: matmarex.Jul 28 2025, 3:47 PM
In T400474#11039019, @Jdrewniak wrote:

Looking at it some more I think this may have been introduced by T390802 which added the following to enable subpixel rendering in PinnableElement.less

.vector-column-start,
.vector-column-end {
	// Support: Chrome
	// Work around sticky-positioned layers disabling subpixel text rendering (T327460, T373066).
	// This must be applied to the possible parent elements of .vector-sticky-pinned-container.
	contain: paint;
	// Draw on top of body text, so that overlaps don't disable subpixel text rendering (T390802, T390803).
	z-index: 1;
}

Seems like it, potentially. Un-applying that z-index rule in my browser's devtools seems to resolve the issue for me. cc @matmarex

DLynch added a comment.Jul 29 2025, 1:53 AM

It'd be nice if this also fixed the issues with the sidebars (non-prettily) covering up tables in article bodies as well, which I feel have gotten more noticeable recently.

In T400474#11038984, @Jdrewniak wrote:

@DLynch A public API for collapsing the menus was unfortunately deprioritized, but we are still actively maintaining Vector and we can revive that option if it's still necessary.

It wouldn't surprise me if we wind up hiding them for all VE sessions at some point in the future, so it's mostly down to how much functionality we'd like Vector to retain when we do that.

Jdrewniak renamed this task from z-index/stacking contexts: Information tooltips in Impact module disappear under Tools sidebar in Vector 2022 to z-index/stacking contexts: Tooltips in GrowthExperiments:ImpactModule & VE disappear under Tools sidebar in Vector 2022.Aug 5 2025, 12:08 PM
Jdrewniak updated the task description. (Show Details)
Jdrewniak updated the task description. (Show Details)
Jdrewniak renamed this task from z-index/stacking contexts: Tooltips in GrowthExperiments:ImpactModule & VE disappear under Tools sidebar in Vector 2022 to [BUG] z-index/stacking contexts: Tooltips in GrowthExperiments:ImpactModule & VE disappear under Tools sidebar in Vector 2022.Aug 7 2025, 10:04 AM
Restricted Application changed the subtype of this task from "Task" to "Bug Report". · View Herald TranscriptAug 7 2025, 10:04 AM
Jdrewniak renamed this task from [BUG] z-index/stacking contexts: Tooltips in GrowthExperiments:ImpactModule & VE disappear under Tools sidebar in Vector 2022 to z-index/stacking contexts: Tooltips in GrowthExperiments:ImpactModule & VE disappear under Tools sidebar in Vector 2022.Aug 7 2025, 10:04 AM
Jdrewniak moved this task from Backlog to Needs refinement on the Reader Experience Team board.
Michael mentioned this in T399864: Help panel stacking issues.Aug 18 2025, 9:48 AM
DLynch renamed this task from z-index/stacking contexts: Tooltips in GrowthExperiments:ImpactModule & VE disappear under Tools sidebar in Vector 2022 to z-index/stacking contexts: Tooltips in GrowthExperiments:ImpactModule & WikiEditor disappear under Tools sidebar in Vector 2022.Aug 18 2025, 8:21 PM
DLynch merged a task: T402227: [Regression ?] Wikitext editor's editor switcher dialog and tooltip overlaps with the Tools/Appearance menu on the side bar.
DLynch updated the task description. (Show Details)
DLynch added subscribers: Ryasmeen, Esanders.
DLynch added a comment.Aug 19 2025, 3:58 PM

I just realized: it's not even an extensions issue, this interferes with Vector's own notifications:

CleanShot 2025-08-19 at 10.57.29@2x.png (504×1 px, 76 KB)

Samwalton9-WMF added a comment.Aug 19 2025, 4:10 PM

Yeah I ran into the issue again this week on Special:Tags, where there's a wide table that disappears underneath it.

Screenshot 2025-08-19 at 17.10.33.png (1×2 px, 566 KB)

DLynch added a comment.Aug 19 2025, 4:17 PM

Yes, the table experience is what switched me from "I should keep these expanded so I'm seeing the default behavior for users" right to "get these menus out of my sight". 😅

A_smart_kitten merged a task: T403460: Menu to switch between visual editor and source editing gets clipped.Sep 2 2025, 10:35 AM
A_smart_kitten added subscribers: IBerker-WMF, ppelberg.
Esanders merged a task: T403468: Edit mode switcher in 2010 wikitext editor appears underneath Vector side bar.Sep 2 2025, 12:00 PM
gerritbot added a comment.Sep 2 2025, 12:03 PM

Change #1184055 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/skins/Vector@master] Revert "Draw sidebars on top of body text to fix subpixel text rendering"

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

gerritbot added a project: Patch-For-Review.Sep 2 2025, 12:03 PM
Esanders added a comment.Sep 2 2025, 12:05 PM

I think the getting the stacking correct is more important that the sub-pixel rendering issue, so we should revert the z-index hack and find a less disruptive fix for that.

gerritbot added a comment.Sep 2 2025, 9:59 PM

Change #1184055 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Revert "Draw sidebars on top of body text to fix subpixel text rendering"

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

Maintenance_bot removed a project: Patch-For-Review.Sep 2 2025, 10:31 PM
ReleaseTaggerBot added a project: MW-1.45-notes (1.45.0-wmf.18; 2025-09-09).Sep 2 2025, 11:00 PM
matmarex added a comment.Sep 2 2025, 11:10 PM

Hi, sorry I didn't respond to this task earlier, I only looked at the email notification I got, and I didn't realize how noticeable the issues were. I didn't intend to break everything when making that change.

Reading it now, it made me think that it's kind of concerning that we allow user-generated content to cover the skin's interface, but I guess it's a feature now, and it has been a feature for a while. There is an old discussion about this from the security point-of-view at T40848.

matmarex closed this task as Resolved.Sep 2 2025, 11:11 PM
Jdrewniak mentioned this in T404021: Verify 1.45.0-wmf.18 deployment.Sep 9 2025, 3:20 PM
Jdlrobson-WMF removed a project: Reader Experience Team.Sep 12 2025, 7:32 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits