-
Notifications
You must be signed in to change notification settings - Fork 29k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Terminal is sometimes blurry, even when window.zoomLevel is 0 #85154
Comments
(Experimental duplicate detection) |
/needsMoreInfo Please provide a screenshot that illustrates the problem. |
Thanks for creating this issue! We figured it's missing some basic information or in some other way doesn't follow our issue reporting guidelines. Please take the time to review these and update the issue. Happy Coding! |
This is occurring for me too, here are screenshots comparing the output window to the terminal window, note the terminal version is blurry. the images are not inline as github does some scaling on image: Clear Output: https://user-images.githubusercontent.com/50384876/69197798-a3cf0c80-0b86-11ea-8e3d-a80bebfcf1bb.png Blurry Terminal: https://user-images.githubusercontent.com/50384876/69197799-a7629380-0b86-11ea-9a5c-3ed0228f87d3.png Additional terminal settings: Edit: Oddly it seems to get blurrier to the middle of the terminal line, I had a colleague double check in-case my eyes were going bad: |
@tick-rick has some great examples attached, I can attach some more if these were not enough. |
Do you set |
I had my zoomlevel set to -1, it seems setting it to 0 fixes the blurryness, very odd. |
This is expected, we can't guarantee non-blurriness in this case because there's a 1-off rounding error that I don't think is specced out as browser zoom is not a web platform feature. |
Since it seems all other issues are being closed as a duplicate of this one, I will put my comment here. On VSCode 1.50.1 on Linux, this is happening at Note that what I'm saying here is that the defaults are causing blurriness and only by overriding the defaults can I make the terminal not appear blurry. |
I confirm the issue about the terminal font being blurry at the middle of the line at 1920x1080 resolution. Below some window size the blurriness disappears. |
Thought it was worth mentioning I'm also seeing the same thing. Both the
{
"editor.fontSize": 20,
"editor.fontFamily": "Fira Code Retina, Consolas, 'Courier New', monospace",
"editor.cursorBlinking": "smooth",
"editor.fontLigatures": true,
"workbench.iconTheme": "Monokai Pro Icons",
"workbench.colorTheme": "Monokai Pro",
"files.insertFinalNewline": true,
"workbench.editor.enablePreview": false,
"workbench.editor.closeEmptyGroups": false,
"terminal.integrated.shellArgs.linux": [
"-l"
],
"terminal.integrated.rendererType": "dom"
} Reproduces on latest VS Code for Windows. |
Having the same issue on Windows. The amount of blurryness changes when the terminal window is resized slightly, see screenshot: Zoomed in: This happens with
|
Addendum: While - like I posted above - So working without GPU acceleration is not an option, apparently. The blurryness is really bugging me, though. What can we do about it? I am totally willing to help fixing this. Is anybody working on it atm? |
@carlfriedrich no one's working on it, the action item here is to reproduce the problem in the xterm.js demo and investigate a fix. Here's the upstream issue tracking the general problem of blurriness (with or without zoom level) xtermjs/xterm.js#2662. I suspect this is the relevant code: |
@Tyriar thanks for the quick reply. I will try to reproduce the behavior with xterm.js. In a quick direct comparison in VS Code between GPU and non-GPU rendering, I noticed that the font looks a bit condensed when GPU acceleration is enabled: Might that be a hint to something? |
@carlfriedrich I suspect you may be using the canvas renderer, because of how the |
Non-GPU renderer just uses elements, so the characters are blended together just like any other web document. |
@Tyriar Thanks for coming back on this. You mean I should set
The first three all result in the same rendering. I am on VS Code 1.63.2. |
@Tyriar I think I was able to reproduce at least part of the behaviour directly with xterm.js, see my comment there. An observation is that the blurryness only occurs with the canvas renderer, not with the dom renderer. Why is the dom renderer not available in VS code? What are the differences? |
In another upstream comment I found out that the problem in my case is tied to Windows's DPI scaling setting. I am using a DPI scaling of 125%. My observations above from three weeks ago were taken with this DPI scaling as well. I can confirm that the displayed behaviour does not occur with a DPI scaling of 100%. However, when I set a scaling factor of 125% in VS Code instead, the behaviour is back. So it does not seem to make a difference, where the scaling is set. Scaling just leads to blurry rendering in any case. |
@carlfriedrich dom renderer is used when you set gpuAcceleration to off. |
I did some research on this topic and documented it along with a proposal for a solution in the upstream issue. For now, the only workaround to have a guaranteed crisp font in the terminal is the one proposed by @YuanfengZhang in a comment above: Set your VS code zoom level in a way that the overall zoom level results in 100% when multiplied by your Windows DPI zoom level. Examples:
Only then the terminal does not apply any zooming, resulting in a crisp font. I hope that my proposal can be implemented, though, then we would be able to have crisp fonts on common zoom levels as well. |
For what it's worth, I found that using the Nerd Font 'CaskaydiaCove NF' was actually the main culprit of having blurry text - adding Cascadia Code back to the top of the font-stack list in settings made an immediate difference - I'm guessing this is because it handles weights better. As a bonus, which I didn't realize beforehand, the glyphs that I wanted a Nerd Font for (Git symbols etc) will still be handled by the nerd font, while most normal characters will be handled by Cascadia Code - so the best of both worlds, and generally clear. E..g. The screenshot doesn't really do it justice, probably from some compression, but using a better font certainly helps. |
This uses the ResizeObserver devicePixelContentBoxSize API in order to fetch the exact device pixel dimensions from the browser. The old possibly blurry behavior is used as a fallback if that API is not available. Part of xtermjs#2662 Part of microsoft/vscode#85154
Adding verified as there is a test plan item associated with this one #158833 |
We have written the needed data into your clipboard because it was too large to send. Please paste.
The text was updated successfully, but these errors were encountered: