Black line appears on top of window on Mac

virgil382 commented 1 year ago

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 ."
  }
}

ayushmanchhabra commented 1 year ago

@virgil382 could you paste the screenshot too?

virgil382 commented 1 year ago

This is a screenshot taken on a Mac running the min repro code in the bug report.

tarunj370 commented 1 year ago

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!

Blatman commented 1 year ago

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.

ahmedaatif commented 4 months ago

Facing this issue aswell, NWJS v0.88.0 SDK ARM64, MacOS 14.5

nwjs / nw.js