Description
@joaomoreno says:
TL;DR Are you a list/tree user? You need to provide a background color to the list/tree in order to preserve sub-pixel anti-aliasing in Windows and Linux.
Recent findings by @alexandrudima and @bpasero uncovered that sub-pixel anti-aliasing gets disabled when a layer is transparent. The list/tree automatically creates a new rendering layer for scrolling performance. So, in order to preserve sub-pixel AA, the root DOM element of the layer must have a background color. That background color depends on its placement in the workbench.
Example: the Explorer should just forward the sidebar background color:
Note: Only opaque colors work here, since passing in a transparent color would defeat the whole purpose and would potentially place the same transparent background color twice, making it darker. If a theme or user eventually passes in a transparent color, the list/tree will ignore it and print the following warning to the devtools:
List with id 'list_id_4' was styled with a non-opaque background color. This will break sub-pixel antialiasing.
Note 2: macOS doesn't have sub-pixel AA. This only affects Linux and Windows.
Workbench List/Tree Users
-
referencesWidget.ts@jrieken -
breadcrumbsPicker.ts@jrieken -
notificationsList.ts@bpasero -
quickInputList.ts@chrmarti -
customView.ts@alexr00 -
callHierarchyPeek.ts@jrieken -
commentsTreeViewer.ts@rebornix -
breakpointsView.ts@isidorn -
callStackView.ts@isidorn -
debugHover.ts@isidorn -
loadedScriptsView.ts@isidorn -
repl.ts@isidorn -
variablesView.ts@isidorn -
watchExpressionsView.ts@isidorn -
extensionsViewer.ts@sandy081 -
extensionsViews.ts@sandy081 -
runtimeExtensionsEditor.ts@sandy081 -
explorerView.ts@joaomoreno -
openEditorsView.ts@isidorn -
markersPanel.ts@sandy081 -
outlinePanel.ts@jrieken -
keybindingsEditor.ts@sandy081 -
mainPanel.ts@joaomoreno -
repositoryPanel.ts@joaomoreno -
searchView.ts@roblourens
Non-Workbench List/Tree Users
These trees do not benefit from the workbench facilities. They use their own stylers. The listBackground needs to be added to those styles.
-
tocTree.ts@roblourens -
settingsTree.ts@roblourens
Good: Sub-pixel AA
Bad: Normal AA
Original issue by @alexandrudima :
fyi @bpasero-
take a screenshot on Windows of a tree, like the Explorer
-
zoom a lot
-
observe it uses greyscale text rendering:
-
if I make the following change in
listView.ts:
-
then, the text renders with subpixel AA:
TL;DR: From what I could tell, as soon as you have a separate layer, the layer dom node itself must have an opaque background, at all times. If it gets transparent even for a split second, it will permanently render with grayscale text. More of my findings documented here