fix: abnormal behavior of windows background material by codebytere · Pull Request #47386 · electron/electron

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.

* 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

* 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>

nikwen · 2025-09-30T14:03:30Z

This PR seems to have caused a regression: #48421

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 deepak1556 and mlaurencin 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 merged/38-x-y PR was merged to the "38-x-y" branch. and removed in-flight/38-x-y labels Jul 18, 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

Closed

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

Closed

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

beyondkmp mentioned this pull request Aug 30, 2025

[错误]: v1.6.0-beta2 划词助手显示工具栏时工具栏的背景会有一个黑色长方形色块 CherryHQ/cherry-studio#9639

Closed

5 tasks

lyswhut mentioned this pull request Sep 19, 2025

In a transparent window, calling setResizable(true) will cause a title bar to appear #48352

Closed

3 tasks

nikwen mentioned this pull request Sep 30, 2025

Setting a transparent window to be resizable breaks transparency #48421

Closed

3 tasks

beecho01 mentioned this pull request Dec 29, 2025

Title bar visible on Windows after loss of focus TopMyster/Ripple#3

Closed

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!

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!

nikwen commented Sep 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

zoy-l Jun 12, 2025 •

edited

Loading

codebytere commented Jul 8, 2025 •

edited

Loading

sbenmoussati commented Jul 28, 2025 •

edited

Loading