Popout Window has title bar on top when losing focus | electronjs.org | Page 1

Hello. I'm developing an application that spawns a second window. I need the second windows background to be transparent, so I can put it on top of other things. It seems I can't do this without losing the titlebar, which is fine as I can still drag and resize it.

My issue is that once this window loses focus the application name appears in a white bar at the top and I think in the background. How can I get rid of that/prevent it?

I'm on windows, using React.

    popoutWindow = new BrowserWindow({
        width: 400,
        height: 600,
        transparent: true,
        frame: false,
        webPreferences: {
            preload: join(__dirname, "../preload/index.js"),
            sandbox: false,
        },
    });

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        html {
            background: transparent !important;
            background-color: transparent !important;
            height: 100%;
        }

        body {
            -webkit-user-select: none;
            user-select: none;
            app-region: drag;
            background: transparent !important;
            background-color: transparent !important;
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            color: white;
            overflow: hidden;
            height: 100%;
        }

        #popout-root {
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="popout-root"></div>
    <script type="module" src="/src/popout.tsx"></script>
</body>

</html>

Please let me know if you need to see anything else! Thank you!

#Popout Window has title bar on top when losing focus