nw.js
nw.js copied to clipboard
nwjs
Black line appears on top of window on Mac
Issue Type
Before opening an issue, please search and see if it has already been raised.
- [x] Bug Report
- [x] Successfully reproduced against the latest version of NW.js?
Current/Missing Behavior
There is an issue with transparent/frameless windows on Mac. A black line shows at the top of the window, which does not seem right. It seems impossible to get rid of it. The line is particularly conspicuous if the HTML body has a transparent border of some thickness.
I attached a min app to reproduce the issue, and a screenshot.
It seems that the line spans between the rounded corners of the Mac window (i.e. where the rounding ends). Use the slider from the min app to play with the thickness of the border. You'll see what I'm talking abut...
Expected/Proposed Behavior
Additional Info
-
Operating System: Mac
-
Code snippet: The following 2 files constitute a min repro. Run it on Mac. Other OSs are fine.
index.html
<!DOCTYPE html>
<html style="height:100%">
<head>
<title>NW.js Border Width Slider</title>
<style>
html {
height: 100%;
margin: 0;
padding: 0;
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
border-radius: 0;
}
body {
margin: 0;
padding: 0;
height : 100%;
border: 10px solid transparent;
}
#content {
box-sizing: border-box;
width: 100%;
height: 100%;
background: white;
}
#sliderContainer {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background-color: rgba(255, 200, 100, 0.3); /* Very light orange (adjust as needed) */
}
#borderWidthSlider {
width: 80%;
}
</style>
</head>
<body>
<div id="content">
<div id="sliderContainer">
<label for="borderWidthSlider">Border width:</label>
<input type="range" id="borderWidthSlider" min="0" max="100" value="10">
</div>
</div>
<script>
const borderWidthSlider = document.getElementById('borderWidthSlider');
const body = document.body;
borderWidthSlider.addEventListener('input', () => {
const borderWidth = `${borderWidthSlider.value}px`;
body.style.borderWidth = borderWidth;
});
</script>
</body>
</html>
package.json
{
"name": "border-slider",
"main": "index.html",
"window" : {
"resizable" : true,
"show_in_taskbar" : true,
"frame" : false,
"transparent" : true
},
"chromium-args": "--disable-gpu --force-cpu-draw",
"devDependencies": {
"nw": "^0.77.0-sdk"
},
"scripts": {
"start": "nw ."
}
}
This is a screenshot taken on a Mac running the min repro code in the bug report.
I am also facing the same issue. I have similar package.json as @virgil382.
@virgil382 do you also see performance issue with "--disable-gpu --force-cpu-draw" flags? My CPU consumption goes above 100% if I interact with the app with these flags enabled. I need a transparent clickthrough window so I can not disable the flags either.
@ayushmanchhabra can you please suggest what could be causing the performance issue and possible fix? Thanks!
FWIW I came across this a while back but never followed it up - at the time I was using a community ARM build on a new MBP running Monterey 12. NWJS version 0.60.0 Chromium 97.0.4692.71 Node 17.3.0 - not sure if it was apparent in earlier builds as I was mainly using 10.13.6 on Intel at the time. Maybe it only happens on Silicon?
The ruler switches between vert and horiz but the black line is always horizontal at the top of the hidden window.
