[SOLVED] Bar with title shows up on transparent overlay window

Bar with title shows up on transparent overlay window

I currently want to write an overlay that uses Electron. The overlay is supposed to be transparent.
The window in question:

const mainWindow = new BrowserWindow({
    width: 100,
    height: 100,
    frame: false,
    alwaysOnTop: true,
    transparent: true,
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
    },
})

Issue

When I click within the window and then elsewhere, in another app or something outside the window, a top bar shows up. I tried this on two different machines, Windows 10 and 11. The main target is Windows users, so (eventually) Windows-only solutions are welcome.

I tried basically everything I could find, but it didn't work, so I didn't include all the researches in the window config here. According to tutorials I saw online, the way I've configured it, should work…

How it looks like

Semi Working fixes

What kind of worked was setting frame: true and then setting the frame's height to 0. However, this results in the window not being draggable.

The problem seems to be with the transparent: true, since when I remove it, the bar does not show up, but it is not transparent anymore (ofc) :').

Reproduce/ Extra

main.ts

import { app, BrowserWindow } from 'electron'
import * as path from "node:path";

const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 100,
        height: 100,
        frame: false,
        alwaysOnTop: true,
        transparent: true,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
    })

    mainWindow.loadFile(path.join(__dirname, 'index.html'));
}

app.on('ready', () => {
    createWindow();
});

index.html

<!DOCTYPE html>
<html lang="en">
    <body>
    <h1>text</h1>
    </body>

</html>

Version

I tried Electron version 37.1.0 and 35.6.0

Thank you for any suggestions or help in advance!

Solution