Blurry/flickering text rendering in Electron

Question

At this point, I can only surmise that the blame lies with Electron (or some component thereof) for blurry text that additionally flickers softly in Atom. Bringing focus to code in the editor via mouseclick sharpens text for an instant, but which progressively softens into a blur over a period of roughly 1-2 seconds.

The various combinations of values in the following snippet (made possible in Atom with styles.less) have no effect:

atom-text-editor,
atom-text-editor.editor,
html {
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering        : optimizeLegibility;
}

1. Visual Studio Code 1.10.2 (Shell 1.4.6):

   process.versions output:

   • ares: "1.10.1-DEV"
   • atom-shell: "1.4.6"
   • chrome: "53.0.2785.143"
   • electron: "1.4.6"
   • http_parser: "2.7.0"
   • modules: "50"
   • node: "6.5.0"
   • openssl: "1.0.2h"
   • uv: "1.9.1"
   • v8: "5.3.332.47"
   • zlib: "1.2.8"

2. Atom 1.15.0 x64:

   process.versions output:

   • ares: "1.10.1-DEV"
   • atom-shell: "1.3.13"
   • chrome:"52.0.2743.82"
   • electron: "1.3.13"
   • http_parser: "2.7.0"
   • modules: "49"
   • node: "6.5.0" openssl: "1.0.2h"
   • uv: "1.9.1"
   • v8: "5.2.361.43"
   • zlib: "1.2.8"

Windows 10 Home 64-bit (up to date), 1080p 60Hz display, Nvidia GTX 980M (drivers up to date), no custom display scaling.

Any leads on where to start with resolving this issue?

Jempty

It looks like an issue with hardware acceleration, like here: Font rendering looks poor on non-retina (GitHub). I also have this issue on both my AMD and nVIDIA graphics cards, only with Windows (not Linux)... – Swayne

Good call, @AlexanderLeithner. Would you care to make that into an answer that I can accept officially? – Jempty

Sure, I'm glad I could "help" you. – Swayne

Answer 1

I have an intel HD internal graphics card and finally figured what caused the problem.

Internal graphics users

1. Open Intel HD control panel
2. Goto 3D settings
3. Turn off conservative morphological anti-aliasing
4. Restart Application and varify

Others

1. Check for setting in anti-aliasing setting
2. Disable if enabled
3. Restart the application and varify.

Jellify

Answer 2

Windows and Electron together are a sort of "explosion mixture" in the belongings of font rendering. Windows currently has some issues with hardware acceleration, not only for fonts, but also for other non-Microsoft technologies, e.g. OpenGL.

As described in this issue on GitHub, this problem is known by the developers of both Electron and Chrome (Google) and has to be solved by Microsoft.

I also have this issue on my projects, which render correctly on Linux and do not on Windows with both my AMD and nVIDIA graphics card.

As @Slaiyer mentioned, there is a workaround for the "major" Electron applications, i.e. VS Code or Atom, Code.exe --disable-gpu respectively atom.exe --disable-gpu.

Swayne

A possible workaround for Windows is running the programs like so: Code.exe --disable-gpu and atom.exe --disable-gpu – Jempty

Answer 3

If you're on an NVIDIA GPU, going to the NVIDIA control panel and disabling FXAA anti-aliasing in the advanced 3D settings should fix the issue.

If that doesn't work for you, you can launch an electron app with the --disable-gpu flag and the problem will be solved.

Afflictive