Skip to content

Windows 11: Material (Acrylic/Mica) and Rounded Corners Inconsistencies in Frameless BrowserWindow Maximize/Restore Actions #46753

@aleversn

Description

@aleversn

Preflight Checklist

Electron Version

35.2.1

What operating system(s) are you using?

Windows

Operating System Version

Windows 11 24H2

What arch are you using?

x64

Last Known Working Electron version

No response

Expected Behavior

  • The material effect (Acrylic/Mica) should persist in all maximize/restore scenarios.
  • Rounded corners should remain consistent.
  • Windows 11 should ideally support the all materials for better native integration.

Actual Behavior

Issue Description

As mentioned in issues #42393 and #41824, previous versions of Electron experienced a bug where the backgroundMaterial effect (e.g., Acrylic/Mica) would disappear after maximizing a frameless window.

While the issue has been partially fixed for cases involving win.maximize() and win.restore(), the material effect still fails under other conditions.

Reproduction Cases

The behavior varies depending on how the window is maximized/restored:

  1. ✅ Works Correctly
    • Clicking the maximize/restore buttons (win.maximize() / win.restore()) retains the material effect.
v1.mp4
  1. ❌ Drag to Maximize → Drag to Restore
    • Dragging the window to the top (maximize) and then dragging it down (restore) causes:
      • Material effect lost (incorrect background color)
      • Rounded corners remain intact
v2.mp4
  1. ❌ Double-Click to Maximize → Double-Click to Restore
    • Double-clicking the title bar to maximize and restore results in:
      • Material effect lost (incorrect background color)
      • Rounded corners remain intact
v3.mp4
  1. ❌ Click Maximize Button → Drag to Restore
    • Clicking the maximize button (works correctly), then dragging to restore causes:
      • Material effect lost
      • Rounded corners also lost
v4.mp4
  1. ⚠️ Click Maximize Button → Double-Click to Restore
    • Clicking the maximize button (works correctly), then double-clicking to restore:
      • Material effect remains
      • Rounded corners lost
v5.mp4

Code Example

win = new BrowserWindow({
    frame: false,
    width: 1200,
    height: 640,
    minWidth: 800,
    minHeight: 500,
    backgroundMaterial: "acrylic", // Should also support "mica" for Win11
    webPreferences: {
        enableRemoteModule: true,
        enableSmoothScrolling: true,
        webSecurity: false,
        devTools: true
    }
});

📊 Behavior Summary Table

Action Sequence Material Effect Rounded Corners Status
Maximize/Restore via buttons ✅ Preserved ✅ Preserved Working
Drag → Maximize → Drag → Restore ❌ Lost (color breaks) ✅ Preserved Bug
Double-click → Maximize → Double-click → Restore ❌ Lost (color breaks) ✅ Preserved Bug
Button Maximize → Drag Restore ❌ Lost ❌ Lost Bug (worse)
Button Maximize → Double-click Restore ✅ Preserved ❌ Lost Partial Bug

Testcase Gist URL

No response

Additional Information

No response

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions