[Bug]: VSCode 1.86.0 on Windows is incompatible (blurry text when scrolling)

Question

[Bug]: VSCode 1.86.0 on Windows is incompatible (blurry text when scrolling)

rsa16 opened this issue a year ago · 43 comments

rsa16 commented a year ago

Is there an existing issue for this?

I have searched the existing issues

Current Behavior

An odd text-duplication effect when scrolling.

Expected Behavior

Working transparency and normal behavior, though that is not what I got.

Steps To Reproduce

I'm not sure how to reproduce this problem, but I've tried uninstalling and reinstalling Vibrancy multiple times. I really don't want to reinstall vscode.

Environment

- OS: Windows 11 Home 22H2
- VSCode: 1.86.0 (User Setup)
- Extension: 1.1.27
- Theme: Dark+

Anything else?

Recording.2024-02-01.132241.mp4

Answer 1 · 2024-02-01T18:37:13.000Z

Hey @rsa16 , i am experiencing the exact same behavior here.

I beliecve it has begun when i dettached a vscode window.

OS: Windows 11
VSCode: 1.86.0 (User Setup)
Extension: 1.1.27
Theme: Github Default

Answer 2 · 2024-02-01T18:37:41.000Z

Same here, began when I updated VS Code today.

EDIT: Downgrading to v1.85 fixed it for me, make sure to disable automatic updates before downgrading.
Set update mode to manual or none, then download and install

Answer 3 · 2024-02-01T18:49:17.000Z

I'm able to reproduce this as well, probably caused by VSCode updating to Electron 27

Answer 4 · 2024-02-01T18:52:06.000Z

@illixion Thx man! Any prevision in order to release a fix?

Answer 5 · 2024-02-01T23:58:22.000Z

To also input:

Affected Visual Studio Code Version: v1.86, easily reproduceable with extension versions like 1.1.20 to 1.1.27. Started today with v1.86 (probably Electron update as @illixion said). Any values from 0, 1, and -1 don't fix the shearing or changing themes.

Answer 6 · 2024-02-02T05:42:41.000Z

Reproduced on my machine.

Answer 7 · 2024-02-04T01:23:35.000Z

From my tests with the VS Code v1.86, the native code for Windows only does an effective effect if the BrowserWindow construction has frame: false and transparent: true.

Edit: oh yeah, I forgot to mention, that with frame: false comes a side effect that can be a bit annoying. The Window lost the maximizing capability.

Answer 8 · 2024-02-04T17:05:08.000Z

When will this be fixed?

Answer 9 · 2024-02-04T17:29:23.000Z

@ShayBox Hey! I downgraded to v1.85 and I noticed that my vibrancy looks nothing compared to what it looked previously, I'm using the same settings and didn't change anything. Any clue why this is?

This is my current vibrancy:
https://i.imgur.com/MYHVOhJ.jpeg

This was my previous vibrancy:
https://i.imgur.com/ROypCET.jpg

See how much they changed..?

Answer 10 · 2024-02-04T22:39:31.000Z

I couldn't say why it appears different, mine appears the same. You can try adjusting the opacity setting.

Answer 11 · 2024-02-05T07:47:45.000Z

@Xyeut no ETA on a fix since I don't use VSCode on Windows, if anyone else creates a PR then I'll be happy to merge it. In regards to the changed appearance, this is because the default transparency mode has been changed to prepare for VSCode 1.86 deprecating it, you can restore the old behavior by choosing dark mode under "Native method of Vibrancy Effect"

Answer 12 · 2024-02-05T07:56:17.000Z

@illixion Ah alright, all good! I'll just use 1.85 till then, I changed the "Native method of Vibrancy Effect" to dark, however didn't make any changes.

Answer 13 · 2024-02-05T07:57:38.000Z

I can't find "Native method of Vibrancy Effect" mind guiding me?

Sure, just go to VSCode settings and search for "Vibrancy", or look for it in the sidebar. The setting will be in the Vibrancy category

Answer 14 · 2024-02-05T07:58:53.000Z

@illixion Alright, does this look right?

Answer 15 · 2024-02-05T07:59:41.000Z

@illixion Alright, does this look right?

Yes

Answer 16 · 2024-02-05T08:01:04.000Z

@illixion Alright, I ended up changing it and I'm still facing the same issue. 😅

It does say when I select dark that it's deprecated

Answer 17 · 2024-02-05T08:05:45.000Z

My bad, forgot that you're on Windows, it's probably the opacity then (it also says that it was modified in the Workspace in the screenshot, might be relevant)

Answer 18 · 2024-02-05T08:07:48.000Z

@illixion wow.. I feel like an idiot, I appreciate you. Thank you for dedicating the time for helping out with this package 😁

Answer 19 · 2024-02-05T10:51:47.000Z

Same here, began when I updated VS Code today.

EDIT: Downgrading to v1.85 fixed it for me, make sure to disable automatic updates before downgrading. Set update mode to manual or none, then download and install

Fixed for me too, Thanks! You have a place in Heaven.

Answer 20 · 2024-02-06T11:39:55.000Z

Hey @illixion if the users don't care about the miss of the maximizing capability, and you agree, I could send a PR to set the BrowserWindow to frame: false, transparent: true. Let me know.

Answer 21 · 2024-02-07T01:17:52.000Z

Hey @illixion if the users don't care about the miss of the maximizing capability, and you agree, I could send a PR to set the BrowserWindow to frame: false, transparent: true. Let me know.

Umm... Users probably care about it.

Answer 22 · 2024-02-07T02:36:40.000Z

If it just removes the maximize button it's not a big deal, you can use aero snap or alt snap, but if it disabled resizing entirely it would be a problem.

Answer 23 · 2024-02-07T03:11:54.000Z

If it just removes the maximize button it's not a big deal, you can use aero snap or alt snap, but if it disabled resizing entirely it would be a problem.

It'll be nice if you add a option to select vibrancy impl method.

Answer 24 · 2024-02-07T09:38:03.000Z

How do I uninstall the extension so that css get restored?
I tried disabling it and uninstalling, but the text ghosting glitch persists...

Answer 25 · 2024-02-07T09:40:37.000Z

How do I uninstall the extension so that css get restored? I tried disabling it and uninstalling, but the text ghosting glitch persists...

Using the "Disable Vibrancy" action in VSCode will restore everything to the original state, just disabling the extension doesn't run the necessary code to undo the changes

Answer 26 · 2024-02-19T06:59:21.000Z

You have to downgrade to 1.85 for it to work right now, only option.

Answer 27 · 2024-02-27T00:18:17.000Z

@illixion is there an ETA on when it'll be fixed on 1.86? I'm on windows.

Answer 28 · 2024-03-02T07:42:29.000Z

Reproduced on my machine.

Answer 29 · 2024-03-06T09:15:36.000Z

Same here, began when I updated VS Code today.
EDIT: Downgrading to v1.85 fixed it for me, make sure to disable automatic updates before downgrading. Set update mode to manual or none, then download and install

Fixed for me too, Thanks! You have a place in Heaven.

Answer 30 · 2024-03-10T05:07:45.000Z

If it just removes the maximize button it's not a big deal, you can use aero snap or alt snap, but if it disabled resizing entirely it would be a problem.

It'll be nice if you add a option to select vibrancy impl method.

Since Electron 27+ prevents DWM from redrawing video frames rendered on opaque windows, the BrowserWindow must be set to frameless & transparent for Mica/Acrylic to work again.

According to Electron docs, transparent windows can't be maximized on Windows, they are also not resizable.

So, the best solution for now is still to downgrade to Electron 26 (VSCode 1.85), if you wish to continue using VSCode Vibrancy.

Answer 31 · 2024-03-10T14:37:56.000Z

If that's what must be done, I use alt snap to resize and move windows anyway, can this be updated?

Answer 32 · 2024-03-10T21:20:53.000Z

Can this issue be added to the FAQ as a known issue with the downgrading workaround?

Answer 33 · 2024-03-10T21:23:04.000Z

I think the triage tag can be removed for this issue, now that the cause got figured out

Answer 34 · 2024-03-11T13:20:42.000Z

Updated the description with a notice, will look into providing a workaround by making the window non-resizable separately later

Answer 35 · 2024-03-16T17:23:56.000Z

As a workaround you can use the Apc Customize UI++ extension to use acrylic but for aforementioned reasons maximizing will disable the effect until you restart VSCode. While tedious, you can manually resize the window to take up the full width and height of a monitor and it doesn't seem to break.

apc-vibrancy.mp4

Answer 36 · 2024-03-19T11:35:06.000Z

@duckies Sorry for the annoying,
Please if you on windows, could please tell me how you activated that acrylic please and if you could share with me your settings.json file?

Massive thanks in advance <3

Answer 37 · 2024-03-19T18:16:38.000Z

@duckies Sorry for the annoying, Please if you on windows, could please tell me how you activated that acrylic please and if you could share with me your settings.json file?

Massive thanks in advance <3

This is Windows, yes. The settings are mostly trial and error or personal preference.

  "apc.electron": {
    "frame": false,
    "backgroundColor": "#00000000",
    "backgroundMaterial": "acrylic",
    "titleBarStyle": "hiddenInset",
    "transparent": true,
  },
  "apc.stylesheet": {
    "html,body,.part.titlebar": "background-color:#00000040 !important"
  },

You then need either a transparent theme or override your themes settings:

// These are not exhaustive, just what I've cobbled together for my use.
"workbench.colorCustomizations": {
    "editorGroupHeader.tabsBackground": "#00000000",
    "sideBar.background": "#00000000",
    "sideBarSectionHeader.background": "#00000000",
    "editor.background": "#00000000",
    "editorGroup.border": "#00000000",
    "editorGroupHeader.tabsBorder": "#00000000",
    "peekViewEditor.background": "#00000000",
    "peekViewEditorGutter.background": "#00000000",
    "panel.background": "#00000000",
    "panel.border": "#00000000",
    "panelInput.border": "#00000000",
    "panelTitle.activeBorder": "#ffffffaa",
    "titleBar.border": "#00000000",
    "titleBar.inactiveBackground": "#00000000",
    "terminal.background": "#00000000",
    "statusBar.background": "#00000000",
    "activityBar.background": "#00000000",
    "activityBar.activeBackground": "#00000030",
    "activityBar.border": "#00000000",
    "editorGutter.background": "#00000000",
    "tab.activeBackground": "#ffffff10",
    "tab.activeBorder": "#00000000",
    "tab.activeBorderTop": "#00000000",
    "tab.border": "#00000000",
    "tab.hoverBackground": "#ffffff20",
    "tab.hoverBorder": "#00000000",
    "tab.inactiveBackground": "#00000000",
    "tab.inactiveForeground": "#ffffff80",
    "tab.unfocusedActiveBorder": "#00000000",
    "tab.unfocusedActiveBorderTop": "#00000000",
    "tab.unfocusedHoverBackground": "#ffffff20",
    "menu.background": "#161616d0",
    "menu.border": "#00000000",
    "menu.foreground": "#cccccc",
    "menu.separatorBackground": "#00000000",
    "sideBar.border": "#00000000",
    "statusBar.border": "#00000000"
}

Answer 38 · 2024-03-21T22:12:58.000Z

@duckies Firstly massive thanks for your time and reply,
Please could you tell me which version of VS Code you are using, because I have the last version and I do the same settings you shared with me but still not working ???
<3

Answer 39 · 2024-04-01T17:04:46.000Z

If this is broken in VSCode 1.86+ due to:

Electron 27 introducing breaking changes to how transparent windows are handled

is there any expectation that this will be updated to support future versions of vscode? I don't want to be stuck using VSCode 1.85 just to support my vibrancy effect :(

Answer 40 · 2024-04-02T04:29:16.000Z

Here

Supposedly it still works if the frame is disabled, which just means you can't resize/minimize/maximize the window using the frame controls, you can still use third-party tools like AltSnap to do that.

This is a limitation that also applies to Discord, I don't have a Discord frame but I keep it maximized all the time like VSCode anyway.

EDIT: You can also use the custom titlebar instead of native which gives you minimize/maximize buttons, just no resizing because there's no frame edge to grab.

Answer 41 · 2024-04-02T08:16:40.000Z

I've just released v1.1.29 which includes the workaround mentioned by @microhobby (thanks!), from my testing on Windows 11 the window remains resizable but cannot be snapped or maximized, third-party snapping software might still work though.

Answer 42 · 2024-05-10T13:43:51.000Z

Here

Supposedly it still works if the frame is disabled, which just means you can't resize/minimize/maximize the window using the frame controls, you can still use third-party tools like AltSnap to do that.

This is a limitation that also applies to Discord, I don't have a Discord frame but I keep it maximized all the time like VSCode anyway.

EDIT: You can also use the custom titlebar instead of native which gives you minimize/maximize buttons, just no resizing because there's no frame edge to grab.

how to download altsnap ?

Answer 43 · 2024-05-17T06:00:44.000Z

how to download altsnap ?

@sharmakriah13 you can find it right here: https://github.com/RamonUnch/AltSnap/releases