How to make ".CodeMirror-selected" background color work on Firefox 84


I’m managing a gamepedia wiki with CodeMirror installed.
With syntax highlighting enabled in the edit box when editing a page, the selected text highlight color is invisible/transparent. Text is selected and you can copy/cut/move it etc., but you can’t see what is selected. The problem is absent when CodeMirror is turned off. This only happens on firefox 84 (tested chrome and opera where things work (almost*) fine).

After some research I tried adding the following to the wiki’s common.css, with little hope:

.CodeMirror-selected::-moz-selection {
  background: rgba(30, 50, 50, 0.1);

.CodeMirror-focused .CodeMirror-selected::-moz-selection {
  background: rgba(30, 50, 50, 0.2);

…which didn’t work, as you can probably guess.

During my research the closest I could find to my problem was this issue from another software using CodeMirror, where Nilk says:

Seems like setting an explicit background color on the codemirror diff view prevents the text selection layer from rendering. The text will still get selected but you won’t be able to see exactly what you select.

and later says that this fixed it.
I’m having trouble figuring out what to make of it exactly, but I still tried to find out what background color the wiki’s edit box is using when CodeMirror is on; it’s 2f0e0f, which is used in 4 instances in Hydradark.css on the wiki, none of which are related to the edit box. With CodeMirror off, the edit box’s background is black.

You can reproduce this by using firefox and opening any of this wiki’s main pages and click edit; or go there directly: Editing Officers - Crying Suns Wiki then switch CodeMirror on if it isn’t already, (the toggle is in the edit box top bar, to the left of the “Advanced” collapsible) then try to select text.

What am I missing?

Apologies, for my limited notions of css may largely explain why I’m stuck on this one. Any hints much appreciated.

(*almost fine, because the selected line background doesn’t show, which is slightly less problematic but still unexpected)

FF 84.0.2, Windows 10

The problem is the background on #content pre. You’ll want to style #content .CodeMirror instead.

On closer look, that doesn’t appear to be it either. Not sure, possibly some site style is messing with the z-ordering of the selection layer.

Thank you for the swift answer!

Can I do anything on my end to figure that out?

Turning off your stylesheets bit by bit to see if it works is one way. CSS draw order logic is extremely tricky, and I keep forgetting the precise rules, but I do remember it took a lot of tweaking to reliably get these layers showing in the right order, so it’s likely that external CSS affecting any of the relevant nodes could mess it up again.

Well, setting #content pre { background: #2f0e0f; } to #content pre { background: transparent; } fixed it. Results in a white background, so I then set .CodeMirror { color: white; background: #2f0e0f; } to get what I wanted, but the selection is properly displayed now.
The #content pre change seems to only have visible consequences in the wiki editor with CM on.
<pre> is barely used anywhere else on the wiki and honestly I can live with transparent bg and just a thicker/colored border in those cases
Anyway, thanks again