Vscode: Icon shapes broken with rendering artifacts

[patrys]

• VSCode Version: insiders build 1.12.0
• OS Version: macOS Sierra

Steps to Reproduce:

1. Launch code-insiders
2. Observe how icon shapes are way off

This only started to manifest itself when my insiders build switched to the 1.12 branch. It looks like vector icon rasterization goes wrong or maybe the alpha channel bitmap gets corrupted. Restarting or upgrading sometimes fixes the issue but not always.

[bpasero]

@patrys that is quite crazy! can you try to reproduce by picking a standard theme (e.g. dark+) and no icons? This might be related to the electron update but I cannot explain it currently.

Also, can you check if there is anything output?
Please see if you can find any logged output that could help us find the source of the issue:

• run code --verbose from the command line and attach the output
• in Code select Help | Toggle Developer Tools and select the Console
• attach any output you see in the Console you can find

Thanks!

[patrys]

I don't see anything particularly interesting in the output. Not attaching the console output as it's included in the verbose output below.

❯ code-insiders . --verbose
[main 15:38:41] Starting VS Code in verbose mode
[main 15:38:41] from: /Applications/Visual Studio Code - Insiders.app/Contents/Resources/app
[main 15:38:41] args: { _: [ '/Users/patrys/GitHub/mirumee/saleor' ],
  help: false,
  h: false,
  version: false,
  v: false,
  wait: false,
  w: false,
  diff: false,
  d: false,
  goto: false,
  g: false,
  'new-window': false,
  n: false,
  'unity-launch': false,
  'reuse-window': false,
  r: false,
  performance: false,
  p: false,
  'prof-startup': false,
  verbose: true,
  logExtensionHostCommunication: false,
  'disable-extensions': false,
  disableExtensions: false,
  'list-extensions': false,
  'show-versions': false,
  nolazy: false }
[main 15:38:43] IPC#vscode-machineId
[73369:0418/153844.169299:INFO:CONSOLE(29)] "[/Users/patrys/.vscode-insiders/extensions/samverschueren.final-newline-0.3.2]: Cannot register 'files.insertFinalNewline'. This property is already registered.", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153844.253852:INFO:CONSOLE(28)] "Overwriting extension <<.ejs>> to now point to mime <<text/x-ejs>>", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[73369:0418/153844.253910:INFO:CONSOLE(28)] "Overwriting extension <<.html>> to now point to mime <<text/x-html>>", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[73369:0418/153844.253943:INFO:CONSOLE(28)] "Overwriting extension <<.htm>> to now point to mime <<text/x-html>>", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[main 15:38:44] IPC#vscode-workbenchLoaded
[73369:0418/153845.758532:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153846.236643:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153846.314440:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153846.314531:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153846.314596:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153846.327125:INFO:CONSOLE(28)] "%c[IPC Library: Watcher]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[73369:0418/153846.384250:INFO:CONSOLE(28)] "%c[IPC Library: Watcher]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[73369:0418/153846.706489:INFO:CONSOLE(28)] "%c[IPC Library: Watcher]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[73369:0418/153846.707294:INFO:CONSOLE(28)] "%c[IPC Library: Watcher]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[73369:0418/153846.875827:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153846.875909:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153846.875964:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153846.876017:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153846.876069:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153846.998031:INFO:CONSOLE(28)] "%c[IPC Library: Watcher]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[73369:0418/153847.054557:INFO:CONSOLE(28)] "%c[IPC Library: Watcher]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[73369:0418/153848.033786:INFO:CONSOLE(28)] "%c[IPC Library: Watcher]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[73369:0418/153848.087255:INFO:CONSOLE(28)] "%c[IPC Library: Watcher]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[73369:0418/153848.793529:INFO:CONSOLE(28)] "%c[IPC Library: Watcher]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[73369:0418/153848.847192:INFO:CONSOLE(28)] "%c[IPC Library: Watcher]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (28)
[73369:0418/153925.646306:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153925.646376:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153925.646548:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153925.646625:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153925.646670:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153941.172580:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153941.172662:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153941.172704:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153941.172943:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)
[73369:0418/153941.173011:INFO:CONSOLE(29)] "%c[Extension Host]", source: file:////Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/workbench/electron-browser/workbench.main.js (29)

[patrys]

I've tried reinstalling the insiders build to make sure it was not corrupted by the self-update mechanism. What I've found is even more puzzling: icons are fine if I launch it using the application icon and corrupted when launched from the command line (which is how I usually launch it). I'm using zsh, iTerm2 (3.1.20170416-nightly) and usually work on projects using virtualenv and direnv.

[bpasero]

@patrys good findings so it may well be terminal related. are you using some kind of terminal emulator like tmux?

[patrys]

No, not really.

After looking very closely at the glitched icons I think they are rendered correctly but with improperly wide stroke widths. Any idea what could affect the vector rasterizer in such an uncommon way?

[bpasero]

@patrys no really not, if I had to guess I would assume that some environment variable you are setting from the terminal has an impact on that. Maybe some unrelated environment variable is actually being picked up by Chrome now that we updated to Electron 1.6.x? Can you try to run VS Code from command line with an empty environment?

[patrys]

Found the culprit. My env has the following locale settings:

LANG=pl_PL.UTF-8
LC_CTYPE=pl_PL.UTF-8

If I unset LANG the icons are rendered correctly 😱

EDIT: of course this is not a viable solution as a whole lot of other things depend on my locale being correct.

EDIT: narrowed it down to the LC_NUMERIC setting. If I force LC_NUMERIC=C then the icons are correct. Which makes me believe some part of vscode or electron uses locale-aware number parsing functions to parse locale-independent data like icon files.

[bpasero]

@patrys thanks, I can reproduce. reported to Electron as https://github.com/electron/electron/issues/9225

[dchest]

To add to @patrys LC_NUMERIC discovery: pl_PL uses , instead of . as decimal separator.

[bpasero]

I pushed a workaround by explicitly setting LC_NUMERIC = 'C' early on startup of Code. Leaving this one open to track the progress in https://github.com/electron/electron/issues/9225

[bpasero]

Same issue can happen when LC_ALL is specified (reported via https://github.com/Microsoft/vscode/issues/26270), so I pushed another change to set LC_ALL to C if it is defined.

[patrys]

The problem seems to be back even with a workaround in place with the most recent insiders build. Here's the output of locale:

LANG="pl_PL.UTF-8"
LC_COLLATE="pl_PL.UTF-8"
LC_CTYPE="pl_PL.UTF-8"
LC_MESSAGES="pl_PL.UTF-8"
LC_MONETARY="pl_PL.UTF-8"
LC_NUMERIC="pl_PL.UTF-8"
LC_TIME="pl_PL.UTF-8"
LC_ALL=

Actual environment variables set by macOS:

LANG=pl_PL.UTF-8
LC_CTYPE=pl_PL.UTF-8

[bpasero]

@patrys I do not see blurry icons with that environment using VS Code Insiders.

[krik]

I started seeing this issue with the latest non-insiders update :(

• VSCode 1.13.0
• MacOS 10.12.5

LANGand LC_CTYPE env vars are set to de_DE.UTF-8

The proposed workaround of setting LC_NUMERIC does not work for me.

[Darep]

Also upgraded to 1.13.0 (376c52) today and now getting blurry icons. Mac OS X 10.10.5. My LC_ALL is empty, LANG="fi_FI.UTF-8".

Bizarrely, opening Extensions panel fixes this for me temporarily (like for ~5 seconds):

[tophattom]

Seeing this on OS X 10.11.6 after upgrading to 1.13.0. LC_ALL is empty and LANG="fi_FI.UTF-8"

[fedorinoGore]

Same issue.

• VS Code 1.13.0
• OS X 10.12.5

LC_ALL is empty
LANG=ru_RU.UTF-8
LC_CTYPE=ru_RU.UTF-8

The problem appears only if launched from terminal

[embano1]

Same here (only when launched from the terminal in OSX 10.12.5):

LANG="de_DE.UTF-8"
LC_COLLATE="de_DE.UTF-8"
LC_CTYPE="de_DE.UTF-8"
LC_MESSAGES="de_DE.UTF-8"
LC_MONETARY="de_DE.UTF-8"
LC_NUMERIC="de_DE.UTF-8"
LC_TIME="de_DE.UTF-8"
LC_ALL=

[cdelaorden]

Exactly same issue, macOS Sierra with LANG=es_ES.UTF-8, when opened with code . from Terminal it goes blurry. If opened from Spotlight search for example, everything's fine.

[tiagoefmoraes]

Having the same issue, my workaround is to open code in terminal with LC_NUMERIC=C code .

[fuzzy76]

@bpasero Is your fix included in the latest release?

[bpasero]

@fuzzy76 will be in the 1.13.1 release later today. Workaround still: https://code.visualstudio.com/updates/v1_12#_macos-blurry-icons

[bpasero]

Fixed with our recent Electron update.

[bpasero]

Verify: see https://github.com/Microsoft/vscode/issues/24820#issuecomment-294916658