我对Electron和Node.js非常陌生，所以请原谅任何术语的误用。
我正在使用Windows 10应用程序。我正试图获得自定义应用程序标题栏区域的能力（类似于其他Electron应用程序，如Github Desktop或Discord）。
从我通过搜索和阅读发现的情况来看，有两种方法可以做到这一点：创建一个无框窗口，并自己创建所有元素，包括窗口控制按钮，或者创建一个无框窗口，并使用Window Controls Overlay（titleBarOverlay）。我更喜欢后者，因为它的代码更少，titleBarOverlay的几个参数足以让按钮看起来像我想要的那样。
问题是，覆盖在按钮周围留下了1px的间隙，我找不到一种方法来调整覆盖的位置。这是窗口按钮的外观（红色标题栏用于对比：

下面是main.js中的窗口创建代码：

const createWindow = () => {
    const win = new BrowserWindow({
        width: 1100,
        height: 900,
        webPreferences: {
            preload: path.join(__dirname, "preload.js")
        },
        backgroundColor: "#0a0a0a",
        frame: false,
        titleBarStyle: 'hidden',
        titleBarOverlay: {
            color: '#323232',
            symbolColor: '#ffffff',
            height: 30
        }
    })

    win.loadFile("index.html");
}

index.html中的样式包括以下内容（title_bar只是body元素下的一个div）：

body {
    border: none;
    margin: 0px;
    padding: 0px;
}

#title_bar {
    -webkit-app-region: drag;
    height: 30px;
    background-color: red;
}

有没有办法消除这种差距？如果不是，是完成的首选方法，我想添加在窗口按钮的外观手动如上所述？
我没有找到很多关于titleBarOverlay的文档。这是一个非常新的功能吗？或者是一个正在被淘汰的功能？