search

microsoft / vscode

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

Underlines of problems are glitched since switching to electron 9 #104326

Closed PF4Public closed 3 years ago

PF4Public commented 4 years ago

Steps to Reproduce: Started occuring after electron was updated to 9. Didn't happen on electron 8 and 7.

I'm aware of the fact, that electron 9 support was reverted, just letting you know, this probably needs to be addressed before switching to electron 9.

sandy081 commented 4 years ago

@deepak1556 Assigning to you as it is electron 9 related. Let me know if I have to do something while it is being adopted. Thanks.

deepak1556 commented 4 years ago

Thanks for the report!

Can we create a minimal repro with chromium so that a bug report can be created in upstream issue tracker.

/cc @alexdima I remember you had some similar issue upstream wrt to underline ?

PF4Public commented 4 years ago

Can we create a minimal repro with chromium so that a bug report can be created in upstream issue tracker.

Can I help with this? If yes, then, how?

deepak1556 commented 4 years ago

@PF4Public what are the steps to repro this in vscode ?

PF4Public commented 4 years ago

Simplest would be to create an empty Javascript file and trigger a syntax error, like this: image

deepak1556 commented 4 years ago

underline

Unable to repro with electron 9, what is the theme you are using ?

PF4Public commented 4 years ago

I'm using Monokai Dimmed Theme. My screen has ~142 dpi, could it be related to that?

deepak1556 commented 4 years ago

Tried that dpi along with the theme, still can't repro

demohan@ubuntu:~$ xdpyinfo | grep resolution
  resolution:    142x142 dots per inch

are you able to repro on any other OS ?

also can you check if the issue disappears when you run with

1) --disable-gpu 2) --disable-features="LayoutNG"

PF4Public commented 4 years ago

also can you check if the issue disappears when you run with

  1. --disable-gpu
  2. --disable-features="LayoutNG"

None of these helped.

I tried with developer tools and come across a peculiar thing with

document.querySelector("#workbench\\.parts\\.editor > div.content > div.grid-view-container > div > div > div > div.split-view-container > div > div > div.editor-container > div > div > div.overflow-guard > div.monaco-scrollable-element.editor-scrollable.vs-dark > div.lines-content.monaco-editor-background > div.view-overlays > div:nth-child(1) > div.cdr.squiggly-error")

By default its height is 19 and it looks glitched: image

Turns out any uneven value here corrupts it, like 17 or 15: image

Even numbers are good, like 16: image Or 20: image

With every resize this height (19px) gets recalculated for every line: image

Changing editor font size gives similar results. Default is 14: image Here is 15: image Any higher value does not corrupt the underline. Here is 13: image 12 Does not corrupt, but 11 does in a weird way: image 10 and 9 are fine: image Unlike 11, 8 does it differently: image

deepak1556 commented 4 years ago

Thanks, thats helpful info!

I am still unable to repro with those sizes, one thing I would like to try is change my font family to what you are using. Can you provide the details.

also looping in @rebornix for additional thoughts on debugging

PF4Public commented 4 years ago

change my font family to what you are using. Can you provide the details.

It is "Fira Code"

Updating Electron to 9.2 didn't help either.

I have remembered that my screen's true dpi is 141,76744186 by 141,402061856 and Xorg was fine with determining it. At some point I did however set my dpi to 142 via my Desktop environment settings (xfce if you're curious). So I tried to revert this setting to "by default" or "unset". And this solved the issue. Should I set my dpi to 142 again, I see glitched underlines again.

In this light this looks like a Chromium/Electron issue. But I couldn't recreate this issue in Chromium 84. Either it is fixed there, or my test was incomplete: image

Perhaps you could provide me with a test-html excerpt, that I could test in Chromium 84.

How could we proceed next?

alexdima commented 4 years ago

The editor at https://microsoft.github.io/monaco-editor/ is the same editor as in VS Code, just a bit older at this point, so it could be used to try to repro outside of Electron, in Chromium.

PF4Public commented 4 years ago

Unfortunately, cannot recreate this in Chromium 85: image

PF4Public commented 3 years ago

I have updated Electron to 11 and compiled vscode from master and no longer can reproduce this issue. Looks like it is indeed fixed in 11. Should I close this issue, or wait till next release of vscode arrives, test again and only then close it?

deepak1556 commented 3 years ago

I would leave this open till insiders with electron 11 goes out.