fix: abnormal behavior of windows background material #47386

codebytere · 2025-06-05T18:09:57Z

Description of Change

Follow-up to #46855

Closes #47366
Closes #46753
Closes #43345
Closes #43196
Closes #46882

The main reason for the background material turning black is that when the window is maximized, Chromium calls GetDwmFrameInsetsInPixels to determine whether an update is needed and sets DwmExtendFrameIntoClientArea, which disrupts the background effect.
Chromium's translucent value is never updated after initialization, so subsequent operations like maximizing or entering fullscreen can break the background material.
Translucency within Chromium windows results in windows being treated as a frameless windows, causing a white title bar to appear during subsequent updates.

Checklist

PR description included and stakeholders cc'd
npm test passes
tests are changed or added
PR release notes describe the change in a way relevant to app developers, and are capitalized, punctuated, and past tense.

Release Notes

Notes: Fixed applying background material correctly when creating windows on Windows, restored animations, and also fixed the issue where dynamically setting the background material had no effect.

reitowo · 2025-06-06T06:45:25Z

Fantastic fix! Thanks for digging into Chromium and find out why. Wanted this feature for long time.

shell/browser/native_window_views.cc

deepak1556 · 2025-06-09T06:20:19Z

shell/browser/ui/win/electron_desktop_window_tree_host_win.cc

+    // We avoid doing this when the window is translucent (e.g. using
+    // backgroundMaterial effects), because setting zero insets can interfere
+    // with DWM rendering of blur or acrylic, potentially causing visual
+    // glitches.
+    const std::string& bg_material = native_window_view_->background_material();
+    if (!bg_material.empty() && bg_material != "none") {
+      return false;
+    }


Has it been verified that these translucent window edges don't bleed in a multi monitor setup ?

@deepak1556 no, and i might need some assistance with that as I've only one monitor!

I’m using a multi-monitor setup and everything looks fine during development. However, to be safe, it would be best if you could verify it on your end. @codebytere

Tested the latest changes and they seem to regress the edges fix, display information

Displays: Resolution: 2560 x 1600 Retina Main Display: Yes PHL27E1N5600H: Resolution: 2560 x 1440 (QHD/WQHD - Wide Quad High Definition)

Open https://gist.github.com/hopejr/aefdd05711802dddfc4d79d7729dbc33

Maximize

Overlay buttons are misaligned and edges bleed into the secondary monitor

background material

normal

This is what I observed on my end; there doesn't seem to be any edge overflow...😅

Not experiencing any of these issues with my multi-monitor system on Windows. @deepak1556 were you testing on macOS?

Sorry missed this thread, I was testing with a remote setup. https://devbox.microsoft.com/ connected from macOS windows app with multiple displays.

@deepak1556 i can try to look into this but also do we think this is potentially a worthwhile edge case to accept in service of fixing the other outstanding issues, at least for a while?

Yeah given this only affects remote case, I don't mind following-up on that separately to avoid blocking this PR.

mlaurencin

Unfortunately, #43345 seems to still repro for me on Windows 11 23H2.

This was the method I was trying https://gist.github.com/edbf82eca6fcfb92cf9abcb7e0161831

codebytere · 2025-07-08T18:30:54Z

@mlaurencin just pushed a fix for #43345 - can you test again? it's working for me now.

trop · 2025-07-17T12:51:42Z

I have automatically backported this PR to "38-x-y", please check out #47814

* fix: abnormal behavior of windows background material Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> * chore: update patches * fix: setting background material after init --------- Co-authored-by: zoy <zoy-l@outlook.com> Co-authored-by: patchup[bot] <73610968+patchup[bot]@users.noreply.github.com>

sbenmoussati · 2025-07-28T08:17:02Z

Hi @codebytere would it be possible to backport the fix in 37-x-y?

codebytere · 2025-07-28T08:18:24Z

@sbenmoussati hey sure - i'm out until thursday but i'll prioritize it then :)

sbenmoussati · 2025-08-04T07:25:00Z

@sbenmoussati hey sure - i'm out until thursday but i'll prioritize it then :)

Hi @codebytere I know you're probably busy — just wanted to gently check if there's any chance the fix could be backported in 37-x-y?

trop · 2025-08-04T09:29:44Z

@codebytere has manually backported this PR to "37-x-y", please check out #47956

trop · 2025-08-04T09:31:34Z

@codebytere has manually backported this PR to "36-x-y", please check out #47957

The underlying Electron issue causing glitchy behavior was fixed: electron/electron#47386

codebytere added semver/patch backwards-compatible bug fixes target/35-x-y PR should also be added to the "35-x-y" branch. target/36-x-y PR should also be added to the "36-x-y" branch. target/37-x-y PR should also be added to the "37-x-y" branch. labels Jun 5, 2025

electron-cation bot added the new-pr 🌱 PR opened recently label Jun 5, 2025

codebytere force-pushed the background-material-rework branch from 7f5ef3c to 5778823 Compare June 5, 2025 18:29

codebytere requested review from clavin and mlaurencin June 6, 2025 10:03

codebytere marked this pull request as ready for review June 6, 2025 10:03

codebytere requested a review from a team as a code owner June 6, 2025 10:03

electron-cation bot removed the new-pr 🌱 PR opened recently label Jun 7, 2025

codebytere force-pushed the background-material-rework branch from 5778823 to 89f51c4 Compare June 8, 2025 11:00

deepak1556 reviewed Jun 9, 2025

View reviewed changes

codebytere force-pushed the background-material-rework branch from 0e45708 to bee0a68 Compare June 11, 2025 13:09

mlaurencin reviewed Jun 23, 2025

View reviewed changes

github-actions bot added the target/38-x-y PR should also be added to the "38-x-y" branch. label Jun 24, 2025

codebytere force-pushed the background-material-rework branch 4 times, most recently from 0fc3fd3 to ed49934 Compare July 7, 2025 13:28

codebytere force-pushed the background-material-rework branch 3 times, most recently from 9212e93 to 4b8244c Compare July 8, 2025 18:30

codebytere requested review from mlaurencin and deepak1556 July 8, 2025 18:30

mlaurencin approved these changes Jul 11, 2025

View reviewed changes

codebytere force-pushed the background-material-rework branch 2 times, most recently from cf95653 to 8131f3d Compare July 13, 2025 09:26

trop bot added needs-manual-bp/36-x-y needs-manual-bp/37-x-y labels Jul 17, 2025

trop bot mentioned this pull request Jul 17, 2025

fix: abnormal behavior of windows background material #47814

Merged

trop bot added in-flight/38-x-y merged/38-x-y PR was merged to the "38-x-y" branch. and removed target/38-x-y PR should also be added to the "38-x-y" branch. in-flight/38-x-y labels Jul 17, 2025

nikwen mentioned this pull request Jul 21, 2025

Not supported for rounded corners. #47824

Closed

3 tasks

WildByDesign mentioned this pull request Jul 30, 2025

[Bug]: Title bar appears on Windows 10/11 illixion/vscode-vibrancy-continued#199

Open

1 task

This was referenced Aug 4, 2025

Transparent Window spawns in title bar on focus loss #47946

Closed

fix: abnormal behavior of windows background material #47956

Merged

trop bot added in-flight/37-x-y and removed needs-manual-bp/37-x-y labels Aug 4, 2025

codebytere mentioned this pull request Aug 4, 2025

fix: abnormal behavior of windows background material #47957

Merged

trop bot added in-flight/36-x-y and removed needs-manual-bp/36-x-y labels Aug 4, 2025

codebytere removed the needs-manual-bp/35-x-y label Aug 4, 2025

trop bot added merged/37-x-y PR was merged to the "37-x-y" branch. merged/36-x-y PR was merged to the "36-x-y" branch. and removed in-flight/37-x-y in-flight/36-x-y labels Aug 4, 2025

jediwade mentioned this pull request Aug 10, 2025

Windows backgroundMaterial doesn't work #48031

Open

3 tasks

jwbonner added a commit to Mechanical-Advantage/AdvantageScope that referenced this pull request Aug 10, 2025

Restore translucent sidebar effect on Windows 11

fc98dfe

The underlying Electron issue causing glitchy behavior was fixed: electron/electron#47386

fix: abnormal behavior of windows background material #47386

fix: abnormal behavior of windows background material #47386

Uh oh!

Conversation

codebytere commented Jun 5, 2025

Description of Change

Checklist

Release Notes

Uh oh!

reitowo commented Jun 6, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

zoy-l Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mlaurencin left a comment

Choose a reason for hiding this comment

Uh oh!

codebytere commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

trop bot commented Jul 17, 2025

Uh oh!

sbenmoussati commented Jul 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codebytere commented Jul 28, 2025

Uh oh!

sbenmoussati commented Aug 4, 2025

Uh oh!

trop bot commented Aug 4, 2025

Uh oh!

trop bot commented Aug 4, 2025

Uh oh!

Uh oh!

zoy-l Jun 12, 2025 •

edited

Loading

codebytere commented Jul 8, 2025 •

edited

Loading

sbenmoussati commented Jul 28, 2025 •

edited

Loading