I've noticed what appears to be a bug with the vibrancy effects in Electron, running on MacOS Big Sur...
Here's what my window looks like when it first loads:
Here's what it looks like if I drag it to another screen and back again, without releasing the mouse:
Here's what it looks like if I drag it to another screen, release the mouse, and then drag it back again:
Here's how I've set up my BrowserWindow:
const win = new BrowserWindow({
darkTheme: true,
frame: false,
roundedCorners: true,
transparent: true,
vibrancy: 'fullscreen-ui',
titleBarStyle: 'hiddenInset',
width: 1024,
height: 768,
minWidth: 640,
minHeight: 480
})
And finally, here's the markup, so you can see how/why there's a draggable header:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html,
body {
margin: 0;
padding: 0;
min-height: 100%;
min-width: 100%;
height: 100%;
width: 100%;
overflow: hidden;
}
header {
display: block;
width: 100%;
height: 38px;
background: rgba(0, 0, 0, 0.5);
user-select: none;
-webkit-user-select: none;
-webkit-app-region: drag;
}
</style>
</head>
<body>
<header>
</header>
</body>
</html>
Aside from "it's a bug", are there any ideas as to why the Window loses its rounded edges and drop shadow when it's dragged to another screen. If this is a bug in the way I've set up the code, rather than in Electron, how do I fix this?
from Electron Multi-monitor bug with vibrancy/transparency on MacOS Big Sur
No comments:
Post a Comment