Description
Hi guys,
I have spent a couple of days and didn't find a solution on how to fix my problem, so decided to report a bug.
Issue: All events (js, css) don't work on the top of the window.
Description: if you move the mouse from the top to the bottom through the window everything works well as expected, but if to move the mouse from the bottom to the top through the window the events will not work on the last 5-8px of the window. For example, if the top item on the page has an HTML title attribute it will still be visible after the mouse leaves the window zone.
It seems like a transparent part of the top panel is present and it affects on everything in this zone.
My code is the simplest blank app:
// main.js
const { app, BrowserWindow } = require('electron')
function createWindow() {
// Required frame and resizable options to reproduce this behavior
const win = new BrowserWindow({
frame: false,
resizable: false,
webPreferences: {
nodeIntegration: true,
},
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// index.html
<!DOCTYPE html>
<html>
<head>
<title>Electron test</title>
<style>
html, body {
margin: 0;
padding: 0;
}
div {
background-color: blue;
}
div:hover {
background-color: #fff;
}
</style>
</head>
<body>
<div title="Some title">Some element</div>
</body>
</html>
// package.json
{
"name": "blank",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"author": "Author",
"license": "ISC",
"devDependencies": {
"electron": "^11.0.3"
}
}
OS: Windows 10
Anything I can do for you, let me know.