Skip to content
This repository has been archived by the owner on Jan 4, 2019. It is now read-only.

transparent frameless windows have stopped working #373

Open
petemill opened this issue Nov 2, 2017 · 0 comments
Open

transparent frameless windows have stopped working #373

petemill opened this issue Nov 2, 2017 · 0 comments

Comments

@petemill
Copy link
Member

petemill commented Nov 2, 2017

BrowserWindow constructor should have the { transparent: boolean, frame: boolean } options. Seems like this might have been working before the split because it's mentioned in the docs in this repo, and someone had it working before, according to #152.

Some tab dragging UX in brave/browser-laptop may benefit from giving the window some opacity. Also if Brave ever wants to fade windows in or out it will likely need it.

Steps to reproduce:

transparent-sample/main.js

const {app, BrowserWindow} = require('electron');


app.on('ready', function() {

  const win = new BrowserWindow({
    x: 100,
    y: 100,
    width: 400,
    height: 300,
    frame: false,
    transparent: true
  });
  win.loadURL('file://' + __dirname + '/index.html');
})

transparent-sample/index.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      html {
        background: rgba(255, 255, 255, .5)
      }
      body {
        opacity: .2;
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
      }
    </style>
  </head>
  <body>sample</body>
</html>

Running with muon

$> ./node_modules/.bin/electron ./transparent-sample

image

Running with electron

$> electron ./transparent-sample

image
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@petemill