Persistent background peeking through certain text

[npezza93]

Seems as though on v5 some text has a different background that isn't present in v4 and persists through selection.

Details

• Browser and browser version: electron 19
• OS version: macos monterey
• xterm.js version: v5 beta

Steps to reproduce

I've so far only noticed this when yarning so im not sure if v4 was just displaying text incorrectly all along and a bug got fixed.
v4:

Screen.Recording.2022-07-30.at.10.31.28.AM.mov

v5:

Screen.Recording.2022-07-30.at.10.32.03.AM.mov

[Tyriar]

@npezza93 do you know what's causing this background color?

Turning on logLevel = 'debug' will let you see the sequence.

Also does this happen on all renderers?

[npezza93]

Also does this happen on all renderers?

Looks like just webgl. Canvas is fine

[npezza93]

Heres the debug log:

[Tyriar]

Hmm, I think devtools parsing and hiding the styling sequence I care about. Can you enable the dom renderer and inspect one of the problem cells instead?

[npezza93]

@Tyriar I'm gonna guess something to do with: #3932

[Tyriar]

Thanks, I think I know what's going on

[npezza93]

Still seeing the different background on the lastest master:
Canvas(correct):

Webgl:

It does go away on selection now though.

Note the [1/4]and $ ./node_modules/.bin/electron .

[Tyriar]

@npezza93 is this with allow transparency enabled?

[npezza93]

@Tyriar Nope, allowTransparency is false

[Tyriar]

@npezza93 hm, what theme are you using? I don't think I saw this when I fixed the selection problem yesterday

[npezza93]

Copy pastable json string version:

'{"fontFamily":"JetBrainsMono Nerd Font Mono","fontSize":15,"fontWeight":"normal","cursorStyle":"block","cursorBlink":true,"scrollback":4000,"macOptionIsMeta":true,"hideContextMenu":true,"rightClickSelectsWord":true,"macOptionClickForcesSelection":true,"theme":{"green":"rgb(171, 233, 179)","brightGreen":"rgb(171, 233, 179)","black":"rgb(110, 108, 126)","brightBlack":"rgb(152, 139, 162)","red":"rgb(242, 143, 173)","brightRed":"rgb(242, 143, 173)","yellow":"rgb(250, 227, 176)","brightYellow":"rgb(250, 227, 176)","blue":"rgb(150, 205, 251)","brightBlue":"rgb(150, 205, 251)","magenta":"rgb(245, 194, 231)","brightMagenta":"rgb(245, 194, 231)","cyan":"rgb(137, 220, 235)","brightCyan":"rgb(137, 220, 235)","white":"rgb(217, 224, 238)","brightWhite":"rgb(217, 224, 238)","cursor":"rgb(248, 189, 150)","cursorAccent":"rgb(30, 29, 47)","foreground":"rgb(217, 224, 238)","background":"rgb(30, 29, 47)","selectionBackground":"rgba(217, 224, 238, 0.2)"},"allowTransparency":false,"cursorWidth":2,"fontWeightBold":"bold","lineHeight":1,"letterSpacing":"0","tabStopWidth":8,"allowProposedApi":true,"logLevel":"debug"}'

[Tyriar]

Can repro 👍

term.options.theme = {"green":"rgb(171, 233, 179)","brightGreen":"rgb(171, 233, 179)","black":"rgb(110, 108, 126)","brightBlack":"rgb(152, 139, 162)","red":"rgb(242, 143, 173)","brightRed":"rgb(242, 143, 173)","yellow":"rgb(250, 227, 176)","brightYellow":"rgb(250, 227, 176)","blue":"rgb(150, 205, 251)","brightBlue":"rgb(150, 205, 251)","magenta":"rgb(245, 194, 231)","brightMagenta":"rgb(245, 194, 231)","cyan":"rgb(137, 220, 235)","brightCyan":"rgb(137, 220, 235)","white":"rgb(217, 224, 238)","brightWhite":"rgb(217, 224, 238)","cursor":"rgb(248, 189, 150)","cursorAccent":"rgb(30, 29, 47)","foreground":"rgb(217, 224, 238)","background":"rgb(30, 29, 47)","selectionBackground":"rgba(217, 224, 238, 0.2)"}

Then in terminal:

echo -e '\x1b[2mdim text\x1b[0m'