Blurry Electron Text

Question

I have some problems with text fonts and icons that look blurry in an electronic application. I tested the same HTML page in Chrome, and the font of the text and icon looks much sharper.

After enlarging the image, I see that Chrome uses subpixel rendering, but Electron only renders in grayscale. I tried using -webkit-font-smoothing: subpixel-antialiased; but that doesn't seem to change anything.

Chrome browser version: 53.0.2785.116
Electronic version (process.versions.electron): 1.4.1
Electron Chrome Version (process.versions.chrome): 53.0.2785.113

What causes this and how do I fix it?

Answer 1

Try to install:

 backgroundColor: '#FFF' 

in the parameters of the BrowserWindow constructor.

Corresponding problem on the electronic tracker