Fixing a Frameless Window That Disappears When You Click Into Another App" category: io.Connect Desktop

io.Connect Desktop
1

Problem

A frameless io.Connect Desktop window, like a custom launcher or toolbar, disappears when you click from it into another app such as VS Code or Excel.

  • The window vanishes and whatever is behind it shows through, but it isn’t closed or hidden: its page still reports document.visibilityState as "visible".
  • In our tests, VS Code and Excel triggered it (Excel only for a moment), and Notepad didn’t.

Why it happens

A transparent window rendered without hardware acceleration can stop being drawn after it loses focus (electron/electron#42635). In Advanced Mode, frameless windows get both by default:

  • Frameless windows are transparent unless the app definition sets "transparent": false. Leaving the key out gives you true.
  • Hardware acceleration is off unless windowManagement.hardwareAcceleration.enabled is true.

On 10.x, this line near the start of application.log confirms that acceleration is off:

hardware acceleration and direct composition disabled in advanced mode

Fix: make the window opaque

Set transparent to false in the window’s app definition, even if the definition has no transparent key set currently. If the definition comes from io.Manager, set it there.

{
    "details": {
        "mode": "frameless",
        "transparent": false
    }
}

Transparent areas of your page then no longer show what’s behind the window. On Windows 11, the window also gets a thin border drawn by Windows, which looks like a 1 px gap at a screen edge.

If the window is docked at a screen edge

Place the window 1 px past the screen edges it touches, so the border on those sides is hidden; the edge facing the rest of the screen keeps it. For a 400 px panel docked to the left edge at full height:

await io.windows.my().place({
    snapped: true,
    horizontalAlignment: "left",
    left: -1,
    top: -1,
    bottom: -1,
    width: 401, // your width + 1, so 400 px stay visible
    saveBounds: true
});

Use these values in every place() call that docks the panel. If your code also calls setSizeConstraints() with a maxWidth, raise it by 1 too, or the panel comes out 1 px narrower when it’s placed again.

Alternative: turn hardware acceleration on

On a machine with a GPU, turning hardware acceleration on also kept the transparent window drawn in our tests. We haven’t tested machines without a GPU, so check those first. Set it in the local system.json, because this key can’t come from a remote configuration source:

{ "windowManagement": { "hardwareAcceleration": { "enabled": true } } }

With acceleration on, the transparency settings for Workspaces and web groups also come into play; see Hardware Acceleration.

Related

Tested in: io.Connect Desktop 10.4.1 and 10.5.0 in Advanced Mode on Windows 11.

1 Like
2

Interesting that document.visibilityState still reports visible even when the window stops being drawn.

That seems like the sort of issue that could be pretty confusing to debug if you’re only checking visibility events.

I’m curious whether the problem also affects windows that update their content continuously, like a small monitoring panel or a live status display.

Would those updates carry on in the background while the window appears blank, or does the rendering failure affect the update behavior too?

Might be a useful distinction when troubleshooting similar cases.