codicons force grayscale text rendering

[alexdima]

• on Windows
• run yarn run web
• open in Edge Dev
• look at the text inside a tab with the magnifier
• observe it uses grayscale antialising

This is caused directly by the following CSS -

vscode/src/vs/base/browser/ui/codiconLabel/codicon/codicon.css

Lines 23 to 26 in 8013616

	/* Hack to get web rendering to align to pixel grid */
	transform: rotate(0);
	-webkit-transform: rotate(0.1deg);
	-moz-transform: rotate(0);

fyi @aeschli @bpasero @deepak1556

[alexdima]

After removing that CSS:

[alexdima]

@misolori It is not clear to me why that CSS with the rotation was added. It came in recently via ef84173. It has bad effects on grayscale vs lcd text antialising, so I will push a removal for now.

[miguelsolorio]

@alexandrudima the CSS transforms were a hack to get the icons to align to the pixel grid and not render blurry (codicons PR). I'm guessing other places where text was affected the icons were not in their separate container but combined with text labels. Here's how it looks on Stable:

However, now that these are removed I'm not seeing this pixelation out of sources, which may have been fixed with our recent electron/font smoothing changes?

Sorry you had to spend so much time investigating this 🙈. I'll also link to the commits from the vscode-codicons repo that explain more about the changes next time so everyone knows what the commits are about.

[alexdima]

No problem! I think the blurry rendering codicons were suffering from 100% the same issue as the text. Since codicons are fonts they go through the same rendering pipeline as text. So, if Chromium would make a layer to render with grayscale text, then both the text itself and codicons would render with grayscale and appear "blurry".