window 最右侧的小间隙（window 过大）

Question

我刚开始用 electron 制作一个新的应用程序，在我的应用程序中添加了一个新功能后发现，在 [=83= 的最右侧添加了一个很难注意到的白色（或者可能是透明的）间隙].
更多解释：我制作了一个应用程序，它从服务器获取一些东西，经过一些操作后，将在 main window 中显示它们。该应用程序只有 1 个 window（它非常简单的应用程序），这是我添加到主 js 中的 window 的配置“Before” 差距显示：

mainWindow = new BrowserWindow({
    show      : false,
    width     : 820,
    height    : 520,
    frame     : false,
    resizable : false,
    title     : "blah blah blah"
})

之后我决定在用户尝试关闭 window 之前扩展应用程序并缓存 window 的最后位置，以便下次用户打开应用程序时，window 将在同一个地方。所以我添加了一些额外的函数来捕获 window "x" 和 "y" 并将它们保存到 "appData" 中的 "json" 文件中。我将 window 配置更改为这个：

mainWindow = new BrowserWindow({
    show      : false,
    width     : 820,
    height    : 520,
    frame     : false,
    resizable : false,
    title     : "blah blah blah",
    x         : {get x from storage},//this is pseudo 
    y         : {get y from storage}//this is pseudo 
})

现在右侧出现了一个小缝隙，如下图所示。图片标题中有更多解释。

HTML:

<body>
    <div class="hello-rob">
        <div class="nav"></div>
    </div>
</body>

CSS:

body,
html {
    position: relative;
    width: 820px;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    height: 100%;
    overflow: hidden;
    -webkit-user-select: none;
}

caption: Css width set to "820px" 与 window "width" in main. js 相同，你可以看到几乎有“ 2-3px" 白色间隙（我用圆圈标出）

标题：如果我评论 css 宽度，那么 window 将扩展到其实际宽度，即“822.4px

标题：当我评论"x"和"y"在main.js和css"width"存在时，一切似乎都很好。

P.S：我不认为这个问题只是关于 main.js 中设置的 "x" 和 "y"不管怎样，主要问题是：

Why and how the window is bigger than what we set for it in main.js and in css?

电子 v1.7.11
Windows 10 64 位

Answer 1

请注意:

这不是 "permanent solution"，这只是 Electron 团队诊断此行为的主要原因之前的临时修补程序 electron.js。
感谢@mplungjan and @Mike提醒我再次阅读文档

我每时每刻都在watch/trace "window size" 想知道电子核内部 "window size" 是不是不准确，renderer.js 里面有东西？！

根据这个结果（来自main.js），它的明显变化发生在main.js部分。

这是 main.js 控制台（当额外间隙明显时）：

[ 823, 522 ]// console.log(mainWindow.getSize());
[ 822, 521 ]// console.log(mainWindow.getContentSize());
{ x: 680, y: 101, width: 823, height: 522 }// console.log(mainWindow.getBounds());

从结果可以看出electron使用setSize, getSize来演示window大小，显然不准确，因为window的大小应该是“ 820px" * "520px".

如何解决这个问题：（请考虑下面的大部分代码都不是新的，新的棘手行有评论）

function createWindow(){
    mainWindow = new BrowserWindow({
        show      : false,
        width     : 820,
        height    : 520,
        frame     : false,
        resizable : false,
        title     : "blah blah blah",
        x         : {get x from storage},//this is pseudo 
        y         : {get y from storage}//this is pseudo 
        minWidth: 820,// new
        maxWidth: 820,// new
        minHeight: 520,// new
        maxHeight: 520// new
    })

    // in this function i called console.log()
    mainWindow.once('ready-to-show', () => {
        mainWindow.show();
        mainWindow.setSize(820,520);// new (i didn't checked but maybe before `mainWindow.show();` is better to place this line of code)
    })
}


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

另一个检查更改效果的测试：

[ 820, 520 ]// console.log(mainWindow.getSize());
[ 820, 520 ]// console.log(mainWindow.getContentSize());
{ x: 680, y: 100, width: 820, height: 520 }// console.log(mainWindow.getBounds());

而且差距不再存在。
P.S：我个人不喜欢这种解决方案，所以如果有人能够提供更好的解决方案，我会接受它作为答案。

window 最右侧的小间隙（window 过大）

Small gap in very right side of window (window oversize)

javascript

css

chromium

electron