microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
163.29k stars 28.89k forks source link

Blurry font after terminal resize #84194

Closed ghost closed 4 years ago

ghost commented 4 years ago

Issue Type: Bug

With terminal open, do:

  1. View > Debug The terminal font is now blurry. This is how it looks like:

Snipaste_2019-11-08_00-17-01

When you undo this, the fonts gets unblurred. Since you can't repeat the same options to have the terminal closed, to hide the sidebar again you have to right click the debug titlebar and select Hide sidebar. This since visual studio code's is an electron app and even its own devs don't use it, users have to endure terrible and annoying bugs like these.

VS Code version: Code 1.40.0 (86405ea23e3937316009fc27c9361deee66ffbf5, 2019-11-06T17:02:13.381Z) OS version: Windows_NT x64 10.0.18362

System Info |Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz (8 x 1800)| |GPU Status|2d_canvas: enabled
flash_3d: enabled
flash_stage3d: enabled
flash_stage3d_baseline: enabled
gpu_compositing: enabled
metal: disabled_off
multiple_raster_threads: enabled_on
oop_rasterization: disabled_off
protected_video_decode: enabled
rasterization: enabled
skia_renderer: disabled_off
surface_control: disabled_off
surface_synchronization: enabled_on
video_decode: enabled
viz_display_compositor: enabled_on
viz_hit_test_surface_layer: disabled_off
webgl: enabled
webgl2: enabled| |Load (avg)|undefined| |Memory (System)|7.89GB (2.37GB free)| |Process Argv|C:\Users\phg\Documents\neuro_data\chbmit_ml| |Screen Reader|no| |VM|0%|
Extensions (14) Extension|Author (truncated)|Version ---|---|--- rainbow-brackets|2gu|0.0.6 matlab-formatter|Aff|2.4.12 vscode-dash|dee|2.2.0 EditorConfig|Edi|0.14.2 terminal|for|0.0.10 matlab|Gim|1.4.0 latex-workshop|Jam|8.3.1 python|ms-|2019.10.44104 remote-ssh|ms-|0.47.2 remote-ssh-edit|ms-|0.47.2 remote-wsl|ms-|0.40.2 sublime-keybindings|ms-|4.0.3 latex-utilities|tec|0.3.4 latex-support|tor|3.1.0 (1 theme extensions excluded)
Tyriar commented 4 years ago

Can you show a screenshot with the unblurry state?

This since visual studio code's is an electron app and even its own devs don't use it, users have to endure terrible and annoying bugs like these.

This could literally not be further from the truth.

ghost commented 4 years ago

I discovered that to trigger this bug, you also need to have the vs code app window snapped to either the left side or the right side on windows.

Here's blurry: blurry

Here's not blurred: not_blurry

I guess electron, right?

Tyriar commented 4 years ago

It's not electron but rather an issue with canvas scaling in https://github.com/xtermjs/xterm.js that has been notoriously difficult to track down. If you zoom in you can see the x axis is probably 1px off which is causing the blurriness:

image

image

Can you try repro using the xterm.js demo and create an issue there if you can still repro it, detailing your DPI (run window.devicePixelRatio in console) and Windows zoom factor (run make text size bigger in start menu)?

ghost commented 4 years ago

@Tyriar

Can you try repro using the xterm.js demo and create an issue there if you can still repro it, detailing your DPI (run window.devicePixelRatio in console) and Windows zoom factor (run make text size bigger in start menu)?

I don't know what any of these fancy words mean. Seems like I would waste a lot of time and effort if I tried to figure out why this particular microsoft (also electron) app is buggy as always. I'm also not an xterm.js user.

And since the issue is closed, that means the problem has disappeared and your "Issues" are now manageable, right?

Well, anyway I have: Make text size bigger is at 100%. (default setting) Make everything bigger is at 125% (default setting) And in vscode I have: "window.zoomLevel": -1,

I tried running window.devicePixelRatio in the terminal, and it failed.

Then I figured out you're probably talking about the javascript browser console (because this is almost a web app, right?). So my window.devicePixelRatio is 1.0416666269302368.

Tyriar commented 4 years ago

"window.zoomLevel": -1,

Ok, this is the reason it's happening. Scaling the browser window outside of multiples of 100% can have 1-off errors and I don't think there's a way to resolve them on the web platform when you need pixel-perfect rendering in a canvas as from the web app's perspective you don't know whether it's going to round up or down. To my knowledge since I had looked into this in the past, you cannot fix this outside of using zoomLevel 0 due to limitations in the web platform.

ghost commented 4 years ago

@Tyriar

"window.zoomLevel": -1,

Ok, this is the reason it's happening. Scaling the browser window outside of multiples of 100% can have 1-off errors and I don't think there's a way to resolve them on the web platform when you need pixel-perfect rendering in a canvas as from the web app's perspective you don't know whether it's going to round up or down. To my knowledge since I had looked into this in the past, you cannot fix this outside of using zoomLevel 0 due to limitations in the web platform.

Yes, but when setting zoomLevel = 0, everything looks giant on my screen.

Everyone else treats scaling problems as a bug, except UWP apps which were designed to be a mobile app language and look huge and dumb, and bad web apps, because they're trying to be a low-fidelity emulation of whatever happens to be popular.

Other good text editors and IDEs (like sublime text) do not have this problem.

This is the kind of issue that only web apps can afford to ignore, with the excuse that "you know, it's the web duh".

Tyriar commented 4 years ago

Yes, but when setting zoomLevel = 0, everything looks giant on my screen.

Have you tried tweaking the editor font size? We also have the a highly upvoted feature request to change the workbench font size https://github.com/microsoft/vscode/issues/519, eventually I'd like to see zoomLevel gone and replaced entirely with font size scaling instead of zooming the entire window so that we don't have to deal with this exact problem.

Everyone else treats scaling problems as a bug

Yes it's a bug, but it's not actionable and that's how we manage our issues. What's the point of having issues open that cannot be fixed?

ghost commented 4 years ago

Yes, but when setting zoomLevel = 0, everything looks giant on my screen.

Have you tried tweaking the editor font size? We also have the a highly upvoted feature request to change the workbench font size #519, eventually I'd like to see zoomLevel gone and replaced entirely with font size scaling instead of zooming the entire window so that we don't have to deal with this exact problem.

Everyone else treats scaling problems as a bug

Yes it's a bug, but it's not actionable and that's how we manage our issues. What's the point of having issues open that cannot be fixed?

It's entirely actionable, it's just that this is complicated, and as you said it will take effort and determination to fix, yet other apps seem to get it right somehow.

Tyriar commented 4 years ago

I just said

you cannot fix this outside of using zoomLevel 0 due to limitations in the web platform.

ghost commented 4 years ago

I just said

you cannot fix this outside of using zoomLevel 0 due to limitations in the web platform.

If vscode UI was not huge and disproportionate on my computer I would not be changing the zoom level.

bobatsar commented 4 years ago

@Tyriar why do you close all of those tickets? It is a problem on a lot of machines and should be fixed! Setting zoomLevel to 0 get huge fonts and makes VS Code unusable! (#85154, #55701, #35988). So this is a bug and should be fixed!

Tyriar commented 4 years ago

@bobatsar

you cannot fix this outside of using zoomLevel 0 due to limitations in the web platform.

Yes it's a bug, but it's not actionable and that's how we manage our issues. What's the point of having issues open that cannot be fixed?