The Prism.js textarea conflicts with a custom font set in userContent.css

[Fat-Zer]

Describe the issue

In my firefox configuration I have a font changed to monospace for textareas via userContent.css (see "To Reproduce the issue" bellow).

It's very convenient when e.g editing some code snippets or translating pseudographics.

But Prism.js on weblate doesn't respect this settings and it brakes rendering of textarea: it rendered with a non-monospace font and spellchecking highlights and cursor are misaligned (see screenshot, the cursor is not on the end of the string).

I already tried

Running on a clean profile (without userContent.css) partially (see #5171) makes the issue to go away. But it's not a fix IMHO.

To Reproduce the issue

Steps to reproduce the behavior:

1. Create userContent.css in your firefox's profile (e.g. ~/.mozilla/firefox/foobar.default/chrome/userContent.css) with content:

   textarea { font-family: monospace !important; }
   

2. For firefox≥69, enable the toolkit.legacyUserProfileCustomizations.stylesheets on the about:config page

3. Go to any translation's page

4. See misaligned cursor and spellchecking highlight

Screenshots

The spell checker actually highlights CDN, JavaScript and HTML. The cursor is on the HTML.

Server configuration and status

Weblate installation: weblate.org service

Additional context

I'm using firefox-68.4.1 on Linux. If the issue is not relevant for the more recent versions feel free to discard it.
If the bug should rather be reported upstream, I would appreciate some directions.

[nijel]

If you change a random part of the page CSS, it can break. You can fix it by applying the same style to the overlay:

.editor-wrap > .highlighted-output { font-family: monospace !important; }

I don't think there is a way to address this on Weblate side...

[Fat-Zer]

I thought you could e.g. copy some of the font settings to the div overlay via JavaScript... or use some clever CSS thing to make the div inherit those from the textarea... but I'm not sure if either of those are possible and it would be better to do this upstream anyway...

The workaround works fine, thanks.

I understand, this is quite an unusual configuration. I'd be glad if it were supported, but I won't insist, so feel free to close the issue.

[nijel]

It's definitely not possible using CSS only. JS could be a solution, but I don't think we should do it - you can modify a lot of other things using userContent.css and anything could break the rendering.

In the end my position would be the same as in #4963 - in case you do something non-standard in your browser, Weblate is not the place to address it.