Vscode: Some parts miss ClearType rendering (subpixel anti-aliasing)

[bpasero]

For some reason parts of our UI fall back to grayscale-antialias, specifically:

• quick open
• components inside the panel
• text inside webviews

Screenshots as reference:

Related: https://github.com/Microsoft/vscode/issues/17827
Related: https://www.html5rocks.com/en/tutorials/internals/antialiasing-101/

[bpasero]

If someone wants to drill deeper why this happens, I am open to contributions in this area if they are reasonable.

[bpasero]

Update: at home (pretty much same setup, running windows inside parallels) I now suddenly see subpixel-antialias in the panel. This issue seems a bit random it seems.

[bpasero]

@joaomoreno @isidorn it looks like as soon as a list widget appears anywhere in the UI, the editor tabs on the right hand side loose subpixel-aa. I only notice this now that the open editors view has adopted the list widget. Just compare a tab when the open editors view is visible to when it is not visible:

This is bananas...................

Is the list still using some crazy CSS shizzle like translate 3d?

[bpasero]

@joaomoreno it looks like will-change: transform is causing this. Works fine when I take it out.

[joaomoreno]

Where is that CSS rule?

[joaomoreno]

I see. This comes from the AbstractScrollbar, which uses FastDomNode. cc @alexandrudima

It was introduced in order to remove translate 3d, but seems to have the same side-effects.

[alexdima]

How can I help?

@joaomoreno Do you want an option to remove the call to this.slider.setLayerHinting(true); in the scrollbar that you can enable from the list ? Have you confirmed that resolves the problem or are we playing hot potato.

[joaomoreno]

I think we are playing hot potato.

I don't want that option, since I want the high performance fast scrolling for the list, just like the editor.

Here's what I believe is the history:

• This issue has been open since the translate-3d times. We didn't have a fix for it.
• We now don't use translate 3d, but use will-change. This issue remains.

Maybe @bpasero knows more? Why is this issue suddenly becoming active?

[bpasero]

@joaomoreno @alexandrudima the background is https://github.com/Microsoft/vscode/pull/39829 where a user adds webkit-mask CSS property to tabs and I warned that this will cause Chrome to render tabs with greyscale AA. The user then responded that already today we lost subpixel AA for tabs and I wanted to see how that was happening. Then I did a bisect and found that it was introduced with Isi adopting the list for the open editors view. We had the issue before already when a list was visible (e.g. from SCM), but now that the list spreads more around our UI, I expect this regression to happen more frequently.

And yeah, we had issues with translate-3d but so far I never saw the list widget causing other parts of the UI to loose subpixel AA. I do not understand how one container on the page that uses will-change property can cause another container on the page to loose its subpixel AA.

[hjkcai]

Hello, I would like to ask how is this issue going on now? I am using Arch Linux and my vscode editor text looks really blurry.

[lulitao1997]

Hi, all.
I'm using manjaro linux, and i found that with default freetype2 package installed, the editor lacks subpixel rendering. However after install freetype2-cleartype via AUR, editor uses subpixel rendering again.

[nyanpasu64]

I'm running Linux but encountered a similar issue. Near-complete fix: Inject custom CSS:

* {
    transform: none !important;
}

Fixes:

• Explorer tree
• Settings screen

Note that "window.titleBarStyle": "custom" will break this fix.

[nyanpasu64]

Is there any progress on this issue being resolved?

After vscode's titlebar on Linux was changed to "custom" without my consent (I may have already changed it back to native, though maybe it was on Windows), I found another workaround that works for custom title bar too:

.monaco-workbench {
    z-index: initial !important;
}
* {
    transform: none !important;
}

EDIT: transform: none breaks scrollable "palettes", like Python's "select interpreter" screen.

[vscodebot[bot]]

This issue is being closed to keep the number of issues in our inbox on a manageable level, we are closing issues that are not going to be addressed in the foreseeable future: We look at the number of votes the issue has received and the number of duplicate issues filed. More details here. If you disagree and feel that this issue is crucial: We are happy to listen and to reconsider.

If you wonder what we are up to, please see our roadmap and issue reporting guidelines.

Thanks for your understanding and happy coding!