Vscode: Icons appearing blurry and thicker

[misolori]

Comparing stable (left) vs insiders (right) it appears that the new activity bar icons that are using the icon font are thicker for some reason.

[misolori]

Looking into this more, I realize that all of our icons are slightly off-grid, which makes them pixelated as well:

Compared to how they are designed:

I suspect this has something to do with our icon font generating tool we use for our icon font.

[misolori]

My findings were about how some platforms/browsers render font glyphs and I was able to update these via https://github.com/microsoft/vscode/pull/83951. However, it appears that the original issue with the activity bar appearing blurry is related to an issue where icons rendered on Windows appear bold. Below is a comparison of macOS (top) and Windows (bottom):

Also, -webkit-font-smoothing does nothing on Windows. Would be worthwhile to explore rendering icons via SVG instead of an icon font.

[misolori]

@deepak1556 would you know if this is related to an electron change (possibly https://github.com/microsoft/vscode/issues/59887) that affects window font renderings?

[misolori]

@deepak1556 wondering if this is related to the font rendering issue? https://github.com/microsoft/vscode/issues/84154

[Guema]

Noticed this too.
It is probably Windows only as you said.
Saw screenshots of MacOS or Linux, and it seems not suffering from it.
As icons seems to be blurrier as they was, it could be related to Electron 6 or new chromium version.
Probably depending of the way it is rendered (SVG ? Font-Icon ?)

[Guema]

May be related to #84698

[bpasero]

@misolori @Guema how does it look like with todays insider build? Make sure to update if you did not yet: https://code.visualstudio.com/insiders/

Version must be b6a486e34fe3715f6edec0cdb11138b1672d33bd (check from about dialog).

[Guema]

I downloaded last Insiders build, looks like the problem is still here

[Guema]

Here is a 1.39.2 (Left) ; Insiders (Right) build comparison

It seems it affect top bar too (even if it is not really visible)
1.39.2 (Top) ; Insiders (Bottom)

[bpasero]

Oh I am sorry, there is a change missing on my end to get this right. Hold on...

[bpasero]

@Guema how about: https://az764295.vo.msecnd.net/insider/dccaf037f35ed2d73fa97e48e8e053887d0366b1/VSCode-win32-x64-1.41.0-insider.zip

[eamodio]

@bpasero That version looks much better to me (its no longer grayscale AA). Although just like the editor text, it is still much "smoother" than 1.39.2 was.

[bpasero]

@eamodio can you spot a difference in the area of the activity bar or just in general?

[Guema]

@Guema how about: https://az764295.vo.msecnd.net/insider/dccaf037f35ed2d73fa97e48e8e053887d0366b1/VSCode-win32-x64-1.41.0-insider.zip

Seems closer to the initial look, even if there it is still different when looking closer.

(1.39.2 vs this insiders build vs Exploration)

The gear icon is where it is the more visible. the 3 versions are different.

Finally, here is a Windows-Zoomed version where we can see the differences well. It seems related to anti-aliasing method :

The difference is visible to me only on :

• Extensions Button
• Gear Button
• Minimize/Maximize/Close Buttons

Otherwise, I probably would not have seen the difference without zooming

[bpasero]

@Guema i am not sure about using the exploration build, that one lags behind a lot of changes we did and only comes with Electron 7. Best to compare current stable 1.40.1 with the version from the zip I posted.

[Guema]

@Guema i am not sure about using the exploration build, that one lags behind a lot of changes we did and only comes with Electron 7. Best to compare current stable 1.40.1 with the version from the zip I posted.

Yeah i could do that, but it seems that launching an instance of the same build type just launch an instance of the already launched editor (If i want to compare 1.39, 1.40 and insiders) I already tried to launch insiders production build and the one you shared, but only could launch one of them at the time

[bpasero]

@Guema you can solve this by providing (from the command line when putting the full path to the code EXE): --user-data-dir <unique dir>

[eamodio]

@bpasero in general, but imo its most noticeable on the activity bar

[bpasero]

I see a difference still (left stable 1.39, right latest insiders):

I am not sure what the cause is, possibly Chrome decides to render colors differently when transparency is applied or we changed something with our Codicons that could have an impact.

@misolori I can get it to look almost the same as before if I use a stronger color (#AAAAAA) for the inactive foreground:

Unfortunately this is probably platform dependent and also should account for the active color, not be hardcoded.

Maybe you wanna play around with changing the activity bar colors if there is a solution that works on all platforms. We could throw in some platform checks in the theme.ts file as well if that is needed.

/cc @deepak1556 if you know of any related Chrome issue that could have an impact

[bpasero]

Oh wait, there was a change in opacity in insiders from 0.6 to 0.4, that could explain it!

[bpasero]

Yeap I see no more difference when manually changing to the previous transparency:

[eamodio]

@bpasero I still see a difference in your last screen shot -- the left one is thinner and less fuzzy. But yeah, with the transparency change they are indeed closer.

[kanlukasz]

I still see a difference in your last screen shot -- the left on is thinner and less fuzzy.

I see the same

[bpasero]

@bpasero I still see a difference in your last screen shot -- the left one is thinner and less fuzzy.

Well to be fair, master includes the changes so that all icons in the activity bar are rendered with LCD-anti-aliasing, while previously it was greyscale. So I would think you notice a difference already because of that.

I think we have to live with the fact that browsers change and accept that. I do not think this is an issue on our end nor Electron we can change.

[Guema]

imo the fix you done make it far more close to initial design.
It is really acceptable now.
If your UX team feels like they need to fine-tune it, they could probably re-fit the icons or ask for font-icons generator changes.
Thanks for your time and your work @bpasero

[misolori]

Removing milestone as this was handled by https://github.com/microsoft/vscode/issues/84584