Blurry text Electron

Question

I have has some issues with text and icon fonts looking blurry in an electron application. I have tested the same HTML page in Chrome and the text and icon font look much crisper.

After zooming the image I can see that Chrome is using subpixel rendering but Electron is only rendering in grayscale. I have tried using -webkit-font-smoothing: subpixel-antialiased; but it does not seem to change anything.

Chrome Browser version: 53.0.2785.116
Electron version (process.versions.electron): 1.4.1
Electron Chrome version (process.versions.chrome): 53.0.2785.113

What causes this and how should I fix it?

Eductive

which version of electron are you using? – Precious

More specifically, what chromium version is this? – Apices

Are you using translate3d on the offending elements? – Sst

@EvanTrimboli No, all I am doing is setting the font and size. – Eductive

Have you tried setting -webkit-font-smoothing to aliased to see if it makes any difference? Or even setting it to none? That would be a possible way to see if it affects anything at all. – Neusatz

Same Issue, Electron 4.1 – Satori

Hmm... Actually for me even the text gets blurry a little. I am not sure if thats because of the theme I am using. I am using light vs theme – Hypnotherapy

Answer 1

Try to set:

backgroundColor: '#FFF'

in the BrowserWindow constructor options.

The corresponding issue on Electron's tracker

Hydrocarbon

It is also now in the FAQ – Jollity