Circular corners in the main window does not work correctly #27264

DevJaGz · 2021-01-11T15:15:19Z

Issue Details

Electron Version:
- electron@11.1.1
Operating System:
- Windows-10-10.0.19041-SP0

Expected Behavior

Window with circular corners

Actual Behavior

When the window is maximized and then minimized, the square and black borders appear.

To Reproduce

Just put in the main.js
trasnparent = true, frame = false
And with html and css create the circular corners (Below I add the code)

Screenshots

Additional Information

Main.js:


let win;

function createWindow () {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    minWidth:400,
    minHeight: 300,
    frame: false,
    transparent: true,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}


app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

index.html:

<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="Body">

        <div class="WindowBar">
            <div class="LogoTitleBar">
                <div class="LogoBar">
                    <img class="LogoBar"
                        src="https://i.pinimg.com/originals/46/0e/78/460e78cb4c61f55da3802ca5d1d68d15.jpg" alt="">
                </div>
                <div class="TitleBar">
                    My App
                </div>
            </div>
            <div class="MenuBar">
                <div class="btn btn1"></div>
                <div class="btn btn2"></div>
                <div class="btn btn3"></div>
            </div>
        </div>
        <div class="content">
            <!-- <img class="ImgContent" src="https://wallpaperaccess.com/full/3542858.png" alt=""> -->
        </div>


    </div>

</body>

</html>

styles.css:

body {
    width : 100%;
    height: 100vh;
    margin: 0;
}

:root {
    --radius_value: 15px;
    --radius_btn  : 15px;
}



.Body {
    width            : 100%;
    height           : 100vh;
    /* 100% of the viewport height */
    margin           : 0px;
    border-radius    : var(--radius_value);
    /* background    : #b42424; */
    /* background       : #212121; */
    display          : flex;
    flex-direction   : column;
    align-items      : stretch;
    background-image: url("https://wallpaperaccess.com/full/3542858.png");
    background-size: cover;
    /* background-size: 100% 100%; */
    /* opacity: 0.5; */
}

.WindowBar {
    display                      : flex;
    justify-content              : space-between;
    align-items                  : center;
    width                        : 100%;
    height                       : 30px;
    /* margin                    : 1px; */
    border-top-right-radius      : var(--radius_value);
    border-top-left-radius       : var(--radius_value);
    /* border-radius             : var(--radius_value); */
    background                   : #313131;
    -webkit-app-region           : drag;
    -webkit-user-select          : none;
    color                        : #fff;
    opacity: 0.98;
}

.LogoTitleBar {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-left    : 10px;
}

.LogoBar {
    width           : var(--radius_btn);
    height          : var(--radius_btn);
    border-radius   : 50%;
    /* background   : #000; */
}

.TitleBar {
    margin-left    : 5px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-family    : sans-serif;
    font-weight    : 100;
    font-size      : 13px;
}

.MenuBar {
    display            : flex;
    align-items        : center;
    -webkit-app-region : no-drag;
    -webkit-user-select: none;
    padding-right      : 10px;

}

.btn {
    display        : flex;
    justify-content: center;
    align-items    : center;
    margin         : 5px;
    width          : var(--radius_btn);
    height         : var(--radius_btn);
    border-radius  : 50%;
    cursor             : pointer;

}

.btn1 {
    background: orange;

}

.btn2 {
    background: green;
}

.btn3 {
    background: red;
}

.content {
    display                   : flex;
    align-items               : center;
    justify-content           : center;
    border-bottom-right-radius: var(--radius_value);
    border-bottom-left-radius : var(--radius_value);
    overflow                  : hidden;
}

.ImgContent {
    width  : 100%;
    height : 100vh;
}

The text was updated successfully, but these errors were encountered:

DevJaGz · 2021-01-14T14:48:52Z

Hi, i discovered a partial solution, detecting the screen size and the app window size (to remember the last size, before to be maximazed, and come back to it), then, in the main process, I maximized manually with "BrowserWindow.setSize(Screenwidth, Screenheight)" and "BrowserWindow.setPosition(0, 0)".
Maximizing with the maximize button works well, however, the disadvantage with this solution is with the draggable bar:
You must choose whether to leave the entire bar draggable and without the double-click option to maximize or reduce the draggable area a bit with so that the rest of the bar can be used with the porpose of maximazing by double clicking.

with this I conclude that there is a bug with electron js when the window is maximized and transparent option remain in true.

mlaurencin · 2021-01-30T01:47:55Z

Hi @jgomez109, I am having a bit of trouble reproducing your issue with the code provided. Could you also provide your renderer.js, or wherever you implemented your menu bar button actions?

Additionally, do you know the last version of Electron this was working on for you? This would help in narrowing down what could be causing the issue.

And if anyone else wants to take a look, here is a repro gist.

DevJaGz · 2021-01-30T06:00:05Z

Hi, thanks for answering.

The project doesn't have renderer.js file yet. I maximized/minimized the window by double clicking on the bar who has the css property -webkit-app-region : drag; (this is stylized in the CSS .WindowBar class)

jkleinsc added the 11-x-y label Jan 13, 2021

codebytere added platform/windows bug 🪲 labels Jan 19, 2021

mlaurencin mentioned this issue Mar 26, 2021

fix: enable system maximization for frameless windows except if transparent #28207

Merged

4 tasks

zcbenz closed this as completed in #28207 Apr 5, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Circular corners in the main window does not work correctly #27264

Circular corners in the main window does not work correctly #27264

DevJaGz commented Jan 11, 2021

DevJaGz commented Jan 14, 2021

mlaurencin commented Jan 30, 2021 •

edited

DevJaGz commented Jan 30, 2021 •

edited

Circular corners in the main window does not work correctly #27264

Circular corners in the main window does not work correctly #27264

Comments

DevJaGz commented Jan 11, 2021

Issue Details

Expected Behavior

Actual Behavior

To Reproduce

Screenshots

Additional Information

Main.js:

index.html:

styles.css:

DevJaGz commented Jan 14, 2021

mlaurencin commented Jan 30, 2021 • edited

DevJaGz commented Jan 30, 2021 • edited

mlaurencin commented Jan 30, 2021 •

edited

DevJaGz commented Jan 30, 2021 •

edited