visual-studio-codeelectronatom-editortext-rendering

Blurry/flickering text rendering in Electron


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): Visual Studio Code 1.10.2

    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: 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?


Solution

  • 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.