Skip to content

Fix translucent menu bar popup background on macOS 26#566

Merged
FuJacob merged 2 commits into
mainfrom
fix/popup-shadow-492
Jun 5, 2026
Merged

Fix translucent menu bar popup background on macOS 26#566
FuJacob merged 2 commits into
mainfrom
fix/popup-shadow-492

Conversation

@FuJacob
Copy link
Copy Markdown
Owner

@FuJacob FuJacob commented Jun 5, 2026

Summary

The menu bar popup (MenuBarExtra(.window)) relied solely on .containerBackground(.windowBackground, for: .window) for its fill. .windowBackground is a translucent material, so on macOS 26 (Liquid Glass) the window or desktop behind the popup bleeds through and the native window chrome and its shadow appear detached from the content, most visible on light backgrounds (issue #492). This swaps the material for an opaque NSColor.windowBackgroundColor, keeping the window-container placement introduced in #403 so the popup renders as one solid rounded panel in both light and dark.

Validation

xcodebuild -project Cotabby.xcodeproj -scheme Cotabby -destination 'platform=macOS' build \
  -derivedDataPath build/DerivedData
# ** BUILD SUCCEEDED **

swiftlint lint --quiet Cotabby/UI/MenuBarView.swift
# exit 0, no warnings

Not yet confirmed visually end-to-end: the reporter's screenshot is on macOS 26.5 in light mode, and I could not reproduce a clean before/after capture on a light-mode desktop in this environment. Recommend a quick manual check on macOS 26: open the popup over a light or busy window (e.g. a browser) and confirm the background is opaque to the rounded edge with the shadow hugging the content, then sanity-check dark mode.

Linked issues

Fixes #492
Refs #403, #402 (the prior double-border fix this change evolves)

Risk / rollout notes

  • Scoped to the menu bar panel presentation layer; no behavior changes elsewhere.
  • The #available(macOS 15.0, *) guard and the macOS 14 fallback path are unchanged. Shipping baseline is macOS 15+ regardless, so every user hits the updated branch.
  • NSColor.windowBackgroundColor is opaque and adapts to light/dark appearance. The intended trade-off is that the popup no longer picks up a translucent Liquid Glass tint, since that translucency was the source of the bug.

Greptile Summary

This PR fixes a translucent bleed-through bug in the menu bar popup on macOS 26 (Liquid Glass), where .windowBackground — a translucent material — let the app or desktop behind the popup show through, causing the native chrome and shadow to appear detached from the content. The fix adds a narrowly-scoped #available(macOS 26.0, *) branch that replaces the material with an opaque Color(nsColor: .windowBackgroundColor), while the macOS 15–25 path keeps the original vibrant material unchanged.

  • Targeted regression fix: only macOS 26+ gets the opaque NSColor.windowBackgroundColor fill; macOS 15–25 continues to use .windowBackground for vibrant/translucent appearance, preserving the prior behavior.
  • Minimal surface area: the change is confined to MenuBarWindowBackgroundModifier, a single private struct with no behavioral impact outside the popup's presentation layer.

Confidence Score: 5/5

Safe to merge; the change is a one-file, presentation-layer fix with no behavioral impact outside the menu bar popup.

The three-way availability guard is correctly ordered and properly scoped: macOS 26+ gets the opaque fix, macOS 15–25 keeps the original vibrant material, and macOS 14 keeps the no-op path. Color(nsColor: .windowBackgroundColor) conforms to ShapeStyle so the containerBackground call is type-safe, and the color is system-adaptive (light/dark). No logic outside this modifier is touched.

No files require special attention; manual visual verification on macOS 26 in light mode (as noted in the PR description) is the only remaining validation gap.

Important Files Changed

Filename Overview
Cotabby/UI/MenuBarView.swift Adds a dedicated macOS 26+ branch in MenuBarWindowBackgroundModifier that swaps the translucent .windowBackground material for an opaque Color(nsColor: .windowBackgroundColor), while preserving the original vibrant-material path for macOS 15–25.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[MenuBarWindowBackgroundModifier.body] --> B{macOS 26+?}
    B -- Yes --> C["containerBackground(Color(nsColor: .windowBackgroundColor), for: .window)\nOpaque fill — fixes Liquid Glass bleed-through #492"]
    B -- No --> D{macOS 15+?}
    D -- Yes --> E["containerBackground(.windowBackground, for: .window)\nVibrant material — original behavior preserved"]
    D -- No --> F["content (no background modifier)\nFallback for macOS 14 and below"]
Loading

Reviews (2): Last reviewed commit: "Limit opaque popup fill to macOS 26, kee..." | Re-trigger Greptile

The popup's only fill was `.containerBackground(.windowBackground, for: .window)`. `.windowBackground` is a translucent material, so on macOS 26 Liquid Glass the window behind the popup bleeds through and the native chrome and shadow detach from the content, most visible on light backgrounds (issue #492).

Use an opaque `NSColor.windowBackgroundColor` instead, keeping the window-container placement from #403 so the popup renders as one solid rounded panel in light and dark.
@FuJacob FuJacob added the bug Something isn't working label Jun 5, 2026
Comment thread Cotabby/UI/MenuBarView.swift Outdated
Greptile review: the Liquid Glass bleed-through (#492) is specific to macOS 26; `.windowBackground` renders correctly on macOS 15 through pre-26. Gate the opaque `windowBackgroundColor` to macOS 26+ and keep the material on 15-25 so the vibrant popup appearance is unchanged for the larger Sequoia base.
@FuJacob FuJacob merged commit f862edb into main Jun 5, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] Wrong shadow around popup

1 participant