Электрон: кнопки в пользовательском заголовке отказываются возвращаться к своим первоначальным свойствам

Question

GIF 1 & 2

Вчера у меня возникла эта проблема - кнопки не возвращаются к своим первоначальным свойствам, когда курсор покидает приложение. (Первый GIF)

Я думаю ... я это исправил? Вроде? (Второй гиф)

Иногда все еще бывает сложно. Я просто поиграл с полями и вроде как решил проблему. Я имею в виду, что он работает лучше, чем раньше ...

GIF 3

Как вы можете видеть здесь, приложение выполняет свою работу. Он возвращает кнопку обратно к ее первоначальным свойствам. Ожидайте, что это не так. Это все еще кажется темнее, как будто оно закрыто курсором. GIF Recorder, похоже, решает проблему.

Есть ли способ исправить это? Я так обрадовался, когда правильно понял меню, но только что узнал об этой проблеме.

**// HTML**
<div class="titlebar">
    <div class="dragzone"></div>
    <h1>Dashboard - Wealm</h1>
    <button id="closeApp">
        <p>x</p>
    </button>
    <button id="minApp">
        <p>-</p>
    </button>
</div>

**// CSS**
.titlebar {
    position: absolute;
    top: 0;
    width: 100%;
    height: 29px;
    overflow: hidden;
    z-index: 50;
    background: rgba(255, 255, 255, 0.8);
}

.titlebar .dragzone {
    -webkit-app-region: drag;
    overflow: hidden;
    position: absolute;
    left: 0;
    width: 990px;
    height: 29px;
}

.titlebar h1 {
    float: left;
    opacity: 0.85;
    margin: 4px 0 0 43.5%;
    font-family: Jost-400-Book;
    font-size: 12pt;
}

.titlebar #closeApp {
    font-weight: bold;
    background: none;
    float: right;
    opacity: 0.55;
    border: none;
    outline: none;
    font-family: Eight One;
    font-size: 18pt;
    overflow: hidden;
    padding-right: 0px;
    margin-right: 8px;
    margin-top: 7.7px;
}

.titlebar #closeApp p {
    margin-bottom: 0;
    margin-top: -5.45px;
}

.titlebar #minApp {
    font-weight: bold;
    background: none;
    float: right;
    opacity: 0.55;
    border: none;
    outline: none;
    font-family: Eight One;
    font-size: 18pt;
    overflow: hidden;
    margin-top: 7.7px
}

.titlebar #minApp p {
    margin-bottom: 0;
    margin-top: -5.45px;
}

.titlebar #closeApp:hover {
    opacity: 1;
}

.titlebar #minApp:hover {
    opacity: 1;
}

**// JavaScript**
const remote = require('electron').remote;
document.getElementById("minApp").addEventListener("click", function (e) {
    var window = remote.getCurrentWindow();
    window.minimize(); 
});
document.getElementById("closeApp").addEventListener("click", function (e) {
    var window = remote.getCurrentWindow();
    window.close();
});

Это код, который я сейчас использую. Любая помощь приветствуется! Хорошего дня!