Skip to content

fix: Windows overlay not visible (CSS url backslash + transparent compositing + follow active screen) - #4

Open
touful wants to merge 1 commit into
varoyik:mainfrom
touful:fix/windows-overlay-display
Open

fix: Windows overlay not visible (CSS url backslash + transparent compositing + follow active screen)#4
touful wants to merge 1 commit into
varoyik:mainfrom
touful:fix/windows-overlay-display

Conversation

@touful

@touful touful commented Aug 15, 2026

Copy link
Copy Markdown

Fixes #3

Summary

Three fixes for the Windows overlay not being visible on screen (verified on Windows 11, opencode 1.18.18, v1.0.2 overlay):

  1. CSS url() backslash break (Windows paths)bridge.cts built file://${spritesheetPath} from a path.resolve() result (C:\Users\...). Backslashes are escape characters in CSS url(), so the background-image value became corrupted (observed via CDP: url("file://C:Userstouful...")). Fixed by normalizing to forward slashes + file:/// prefix in:

    • preload/bridge.cts (getSpritesheetPath)
    • renderer/app.ts (onSwitchPet, same pattern)
    • main/window.ts (passes the normalized path via --spritesheet-path)
  2. Fully-transparent window never composited on some Windows environments — with backgroundColor: "#00000000" (+ the opacity: 0.9999999 hack) the window content is rendered (visible via CDP Page.captureScreenshot) but never presented to the screen (screen capture shows whatever is underneath). Changing to backgroundColor: "#01000000" (alpha = 1/255, visually transparent) + opacity: 1.0 makes the pet visible with a transparent background.

  3. Pet follows the active screen — the overlay positioned itself on the primary display (getPrimaryDisplay()), which on multi-monitor setups may not be where the user is working. Replaced with getActiveWorkArea() which uses the display under the cursor (falls back to primary).

Verification

Tested by unpacking the v1.0.2 release app.asar and applying the same changes to dist/:

  • CDP before: background-image: url("file://C:Userstouful...") (broken URL), image never loads
  • CDP after: url("file:///C:/Users/touful/.opencode-pets/overlay/resources/app/assets/pets/gutsy/spritesheet.webp"), image loads 1536x1872
  • Pet visible on screen with transparent background
  • Pet appears on the display where the cursor is

Notes

  • winOnly is still used for thickFrame, so the opacity: 1.0 change does not orphan it.
  • The 0.9999999 opacity hack becomes unnecessary once the background alpha is non-zero.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Windows: overlay window blank on screen (CSS url() backslash break + transparent window not composited)

1 participant