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

[rsa16]

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

[arthursmuller]

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

[ShayBox]

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

[illixion]

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

[arthursmuller]

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

[KingPr0o7]

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.

[d0j1a1701]

Reproduced on my machine.

[microhobby]

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.

[Xyeut]

When will this be fixed?

[Xyeut]

@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..?

[ShayBox]

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

[illixion]

@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"

[Xyeut]

@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.

[illixion]

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

[Xyeut]

@illixion Alright, does this look right?

[illixion]

@illixion Alright, does this look right?

Yes

[Xyeut]

@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

[illixion]

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)

[Xyeut]

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

[ibandim123]

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.

[microhobby]

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.

[d0j1a1701]

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.

[ShayBox]

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.

[d0j1a1701]

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.

[3dfactor]

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

[illixion]

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

[ShayBox]

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

[Hummpyypioneer]

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

[hjnnjh]

Reproduced on my machine.

[WaseemAlqahwaji]

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.

[VLTHellolin]

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.

[ShayBox]

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

[okunamayanad]

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

[okunamayanad]

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

[illixion]

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

[duckies]

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

[MbarkT3STO]

@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

[duckies]

@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"
}

[MbarkT3STO]

@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

[nathan-fiscaletti]

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 :(

[ShayBox]

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.

[illixion]

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.