Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

frameless, transparent window dragged out of the screen turns to black #23215

Closed
3 tasks done
corpvs2 opened this issue Apr 22, 2020 · 6 comments
Closed
3 tasks done

frameless, transparent window dragged out of the screen turns to black #23215

corpvs2 opened this issue Apr 22, 2020 · 6 comments
Labels
8-x-y bug 🪲 platform/windows

Comments

@corpvs2
Copy link

corpvs2 commented Apr 22, 2020

Preflight Checklist

  • I have read the Contributing Guidelines for this project.
  • I agree to follow the Code of Conduct that this project adheres to.
  • I have searched the issue tracker for an issue that matches the one I want to file, without success.

Issue Details

Electron Version:8.23

Operating System:Windows 10 (1809)

Last Known Working Electron version:8.23

Expected Behavior

When dragging a frameless, transparent window (using -webkit-app-region: drag;) out of screen bounds (when part of the window is outside the desktop viewable area), it should remain transparent when dragged back to the viewport.

Actual Behavior

When a frameless, transparent window is being dragged out of the screen, the out-of-bounds transparent background turns to black when coming back to the viewport.

To Reproduce

Always

main.JS

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame:false,
    transparent:true,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

index.html

<!DOCTYPE html>
<html>
  <link rel="stylesheet" type="text/css" href="./css/style.css" />
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
   <!-- <canvas width="500" height="500"></canvas>-->
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>

style.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	-webkit-user-drag: auto;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/********************
*
*     MY STYLES
* 
*********************/
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-app-region: drag;
}

Screenshots

Additional Information
@ColorfulHorse
Copy link

same problem, but if set resizable false everything is ok

@Gho-System
Copy link

same problem, but if set resizable false everything is ok

I set resizable:false, but facing the same problem.
I found that after I did hide&show from task tray, this problem didn't occur.
So I set the code of "win.hide();" and "win.show();" to be executed automatically when program started, but it didn't work.
Is "click on tasktray" the key...? :<

@faxinwang
Copy link

it sames that app.disableHardwareAcceleration() can solve the black screen or black border problem. But I DO need hardware acceleration to run tensorflow.js in my application. So I need another solution to solve the problem with disabling Hardware Acceleration, Help!!!.

@electron-triage
Copy link

The Electron version reported on this issue is no longer supported. See our supported versions documentation.

If you're still experiencing this issue on a supported version, please open a new issue with an updated repro - a Fiddle is very appreciated.

Electron has a large issues backlog. To help our team prioritize, we're closing older issues and asking for new issues with updated repro steps if it affects a supported version. This helps sort what issues are still relevant and helps us fix them more quickly.

Thanks for your patience and understanding!

@lxfater
Copy link

lxfater commented May 18, 2022

it sames that app.disableHardwareAcceleration() can solve the black screen or black border problem. But I DO need hardware acceleration to run tensorflow.js in my application. So I need another solution to solve the problem with disabling Hardware Acceleration, Help!!!.

Did you solve this problem?

@jurkog
Copy link

jurkog commented Dec 10, 2022

it sames that app.disableHardwareAcceleration() can solve the black screen or black border problem. But I DO need hardware acceleration to run tensorflow.js in my application. So I need another solution to solve the problem with disabling Hardware Acceleration, Help!!!.

Same boat

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
8-x-y bug 🪲 platform/windows
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@ckerr @jurkog @ColorfulHorse @lxfater @faxinwang @electron-triage @corpvs2 @Gho-System