Hyper: Unreadable nano labels if backgroundColor is transparent

[lordgiotto]

• OS version and name: MacOS 10.13.4
• Hyper.app version: 2.0.0
• Link of a Gist with the contents of your .hyper.js: https://gist.github.com/lordgiotto/478485df770ef3a09359617453c3c115
• Relevant information from devtools _(CMD+ALT+I on macOS, CTRL+SHIFT+I elsewhere)_: N/A
• The issue is reproducible in vanilla Hyper.app: With Vanilla Hyper.app, except for backgroundColor setting.

Issue

There are a lot of similar opened issues, but all miss the steps to reproduce the bug.
I noticed that it depends on backgroundColor setting.

Nano labels are not readable if backgroundColor setting is an rgba color with opacity different from 1.

Thanks for your great work btw :)

backgroundColor: 'rgba(0, 0, 0, .9)',

---

backgroundColor: 'rgba(0, 0, 0, 1)',

[nerrad]

ya happening for me too. The hyper-star-wars theme sets background color to transparent which is how it surfaced for me.

[sukima]

Confirmed this happens in other apps as well like nnn.

[sukima]

Unfortunately if you want a background image you are forced to have a transparent backgroundColor which then introduces this bug.

My guess is that when the terminal receives the reverse escape code the renderer will use the backgroundColor for the text color. But since it is transparent it doesn't show. Unfortunately by setting an opaque backgroundColor the terminal will write that color to the canvas and cover any background set in the CSS.

Since the terminal will only handle a color not a url() there is no way to have a background image without transparent and introducing this bug.

Now if only there was a setting so that reverse colors can use an opaque color while the normal text background could use the transparent background that would be great.

[chabou]

@sukima yes, this is exactly what happens. This must be fixed directly in xterm.js

[chabou]

Related xterm issue: https://github.com/xtermjs/xterm.js/issues/1898