currentWindow.maximize() doesn't truly maximize the window

[Z3RoMan]

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: Electron 6.0.4
• Operating System: Windows 10 (1903)

Expected Behavior

The maximize() function maximizes the window as it would any other window.

Actual Behavior

The maximize() function "maximizes" the window, but doesn't give it the maximized property. The window is still resizable via the edges of the app.

To Reproduce

Have an app with a custom title bar emit the maximize() function on a custom placed maximize button. The properties of the window should be frame: false and transparent: false.

Additional Information

The general concept of the custom titlebar with buttons is taken from a repository found here:
https://github.com/maxchaor/electron-title-bar-tutorial
The repository in question uses Electron 2.0.0 to run it.

This issue isn't present on every device. It's been tested on three of my own systems and it works fine on there.

[ZaDarkSide]

Yes, this is a very very old bug, that no one bothered to fix.
#12854

[Z3RoMan]

Yes, this is a very very old bug, that no one bothered to fix.
#12854

Yeah, I found that bug report as well. It doesn't exactly describe it the same way since it even happens on transparent: false (and frame: false), but I'm guessing the result is the same, or rather lack thereof.

What I'm wondering is how other apps fixed this particular issue. Discord for example utilises a custom title bar and maximises just fine.

[ZaDarkSide]

Well they don't use transparent: true and frame: false at the same time to avoid the bug like everybody else.

[Z3RoMan]

Well they don't use transparent: false and frame: false at the same time to avoid the bug like everybody else.

Are you certain that's the cause? Because we added in transparent: false after the bug was found to test it further, without result. In both true and false cases, the resizing glitch still occurs.

[ZaDarkSide]

For me it only manifests on using transparent: true and frame: false at the same time.

EDIT: actually just setting transparent: true now triggers the bug, so it doesn't depends on frame: true/false anymore.

[alexhx5]

@ZaDarkSide I also have this issue with transparent: false now, after upgrading from v4.x to 6.x.

• I can resize the window in maximized state

• And the remote.getCurrentWindow().maximize() function always returns false now, which caused the shown below maximizeWindow() function in my app to stop working properly as well (the unmaximize() in particular):

Info

• Electron Version: 6.0.5
  • 6.0.5
• Operating System:
  • Win10 (1903) x64
• Last Known Working Electron version:
  • 4.x (not sure about 5.x)

To Reproduce

const remote = require('electron').remote
const window = remote.getCurrentWindow()    

// unmaximize() inside this function sopped working properly after v4.x => v6.x update
maximizeWindow () {
  console.log(this.window.isMaximized()) // Always false 
      
  if (this.window.isMaximized()) {
    this.window.unmaximize()
  } else {
    this.window.maximize()
  }
}

main

 mainWindow = new BrowserWindow({
    width: 1280,
    height: 720,
    minHeight: 300,
    minWidth: 500,
    frame: false,
    webPreferences: {
      nodeIntegration: true,
      webSecurity: process.env.NODE_ENV !== 'development', // to make image loading from local drive possible
    } 
  })

[Z3RoMan]

@AlexSHoffman Your problem is indeed directly related to ours. Whenever a window gets maximised on certain systems (all Windows 10), it does stretch it out accordingly, but doesn't give itself the correct state. Because of that, isMaximized() always returns false.

[alexhx5]

@Z3RoMan yeah, but the weird thing is, for me it worked properly in v4.1.5, the isMaximized() function has been returning true in the maximized state, with the same config:

frame: false,
transparent: false

[ZaDarkSide]

The bug appears when you use transparent: true

[alexhx5]

@ZaDarkSide ...and also when I use:

frame: false,
transparent: false

[ZaDarkSide]

Yes, well clearly something changed between 4.x and 6.x

[wangjikill]

{
    minWidth:800,
    minHeight:600,
    resizable:true
}

You must include the above configuration, win.isMaximized() and win.unmaximize() to work properly.

electron:6.0.2
system:win10

[alexhx5]

@wangjikill your suggestion does not fix the problem:

• window.isMaximized() still returns false
• window.unmaximize() still doesn't work because isMaximized always false
• The window is still re-sizable after window.maximize()

electron: v6.0.7
system: win10

[EGo14T]

@AlexSHoffman
Do you have any solution to solve this issue？:)

[alexhx5]

@EGo14T no, I couldn't find a solution. But maybe it will get fixed in Electron v7.x

[EGo14T]

@EGo14T no, I couldn't find a solution. But maybe it will get fixed in Electron v7.x

hmm...all right，thinks :)

[binaryfunt]

It seems Electron 5.0.x are the latest versions in which this bug is not present.

Update: just tried upgrading my Electron app to Electron 8.2.1 and cannot reproduce the bug

[EGo14T]

@AlexSHoffman You can use Electron 5.0.12（<6.0.0），and set you body CSS like this
body {
border: 1px solid #48545c;
overflow-y: hidden;
}
then this issue is solved~

[binaryfunt]

@EGo14T It's just the use of Electron <6.0.0 that matters, the CSS is irrelevant

[alexhx5]

@EGo14T staying on version <6.0 is not really a solution. It has to get fixed

[wangjikill]

Guys, today, I try window maximization and cancel maximization again, I found this.

This is my initial window configuration

let size = electronScreen.getPrimaryDisplay().workAreaSize;
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    maxWidth: size.width,
    maxHeight: size.height,
    center: true,
    frame: false,
    show: false,
    resizable: false,
    movable: true,
    webPreferences: {
      nodeIntegration: true
    }
  });

When I switch to the second page, and the new page use the new size, it can also maximize and cancel the maximization. I wrote it like this.

win.setResizable(true);//The position of this line of code is above the change size code. Switching window maximization and cancel maximization work. If you put it below, it will not work properly.

win.setResizable(true);

win.setSize(1000,800);
win.setMinimumSize(800,600);
win.center();

The code to switch is like this

  ipcMain.on("maximize", () => {
    console.log(win.isMaximized());
    if (win.isMaximized()) {
      win.unmaximize();
    } else {
      win.maximize();
    }
  });

electron:6.0.2
system:win10

Sorry, my English is not very good.

[Liupeng8]

Have the same problem, it looks like this problem should exist for a long time, isn't the author planning to fix it？

[friksa]

I have the same issue on Mac OS Catalina with Electron 7.1.2.

[alexhx5]

The issue is fixed for me in Electron 7.1.2 on Windows 10. I don't know at which point it got fixed after 6.0.7

[TheKiLLerDz]

The issue still exists in Electron 7.1.3 on Windows 10!

[alexhx5]

@TheKiLLerDz I just updated from 7.1.2 to 7.1.3 on Windows 10 and there's no issue, it works properly in my project on both of these versions, even though it didn't work before 7.1.2 and I'm not sure what fixed it for me.

Man this is such an inconsistent bug.

[Liupeng8]

The issue still exists in Electron 7.1.3 on Windows 7

[TheKiLLerDz]

the bug is only when u use "transparent: true", when you don't use it it works perfect

[alexhx5]

@TheKiLLerDz nope, I had this issue with transparent: false. Read my message in the beginning of the thread

[TheKiLLerDz]

@AlexSHoffman the css added to body seems not to work for my case , only making "transparent: false" that makes Maximize really do it's job
& as u said before the window doesn't really maximize it self since u can resize it this is why isMaximized Method is always returning false

[Liupeng8]

The issue still exists in Electron 7.1.4 on Windows 7

[chenjietao]

I wrote a plug-in to fix this problem. See electron-frameless-window-plugin. In fact, I rewrote several methods of BrowserWindow instance, including getNormalBounds(), maximize(), unmaximize() and isMaximzed(). And I've added some features to make frameless windows work better. Such as disable the menu when right clicking the drag region.

Code:

  if (win.webContents.browserWindowOptions.transparent) {
    // rewrite getNormalBounds, maximize, unmaximize and isMaximized API for the transparent window
    let resizable = win.isResizable()
    let normalBounds = win.getNormalBounds ? win.getNormalBounds() : win.getBounds()

    win.getNormalBounds = function () {
      if (!this.isMaximized()) {
        if (BrowserWindow.prototype.getNormalBounds) {
          normalBounds = BrowserWindow.prototype.getNormalBounds.call(this)
        } else {
          normalBounds = BrowserWindow.prototype.getBounds.call(this)
        }
      }
      return normalBounds
    }.bind(win)

    win.maximize = function () {
      normalBounds = this.getNormalBounds() // store the bounds of normal window
      resizable = this.isResizable() // store resizable value
      BrowserWindow.prototype.maximize.call(this)
      if (!BrowserWindow.prototype.isMaximized.call(this)) {
        // while isMaximized() was returning false, it will not emit 'maximize' event
        this.emit('maximize', { sender: this, preventDefault: () => {} })
      }
      this.setResizable(false) // disable resize when the window is maximized
    }.bind(win)

    win.unmaximize = function () {
      const fromMaximized = BrowserWindow.prototype.isMaximized.call(this)
      BrowserWindow.prototype.unmaximize.call(this)
      if (!fromMaximized) {
        // isMaximized() returned false before unmaximize was called, it will not emit 'unmaximize' event
        this.emit('unmaximize', { sender: this, preventDefault: () => {} })
      }
      this.setResizable(resizable) // restore resizable
    }.bind(win)

    win.isMaximized = function () {
      const nativeIsMaximized = BrowserWindow.prototype.isMaximized.call(this)
      if (!nativeIsMaximized) {
        // determine whether the window is full of the screen work area
        const bounds = this.getBounds()
        const workArea = electron.screen.getDisplayMatching(bounds).workArea
        if (bounds.x <= workArea.x && bounds.y <= workArea.y && bounds.width >= workArea.width && bounds.height >= workArea.height) {
          return true
        }
      }
      return nativeIsMaximized
    }.bind(win)
  }

[wangjikill]

Guys,I found this, after you "setResizable(false)" or "new BrowserWindow({resizable: false})",then "isMaximized()" will always return "false",even if you execute "setResizable(true)".

So if you want "isMaximized()" to return the result correctly, make sure "resizable" is true always.

[kkgg123]

Guys,I found this, after you "setResizable(false)" or "new BrowserWindow({resizable: false})",then "isMaximized()" will always return "false",even if you execute "setResizable(true)".

So if you want "isMaximized()" to return the result correctly, make sure "resizable" is true always.

I found that too!!!!!!!! version7.1.8

[zcbenz]

Fixed with #26586.

[morteza-jamali]

If you want to first use setResizable(false) and next time change it to setResizable(true) , you can use following code as replacement :

First time:

mainWindow = new BrowserWindow({
    resizable: true,
    frame: false,
    width: 400,
    height: 400,
    minHeight: 400,
    minWidth: 400,
    maxHeight: 400,
    maxWidth: 400,
    .
    .
    .
  });

Next time:

const { width, height } = screen.getPrimaryDisplay().workAreaSize;
mainWindow.setMaximumSize(width, height);
mainWindow.setSize(1024, 728);
mainWindow.center();

above code worked very good for me .

[olga-climova-2]

Seems that the window.maximize() function still doesn't work on Linux. We experience issues with automation testing, because the window still has 800x600 default size after maximize(). On Windows it's fine, and on Mac too, but we are using latest Ubuntu, and ubuntu 18.04 for testing too. For the moment we solved the issue by creating a window of minimal valid size for acceptance testing.

[mangeshsirkare]

Add below line in index.js
It will maximized your window after splashScreen. You guys must try this

setTimeout(function(){
mainWindow.maximize();
},8000);

You can adjust delay in setTimeout function.

[paramula]

const { remote } = require("electron");
const win = remote.getCurrentWindow();
let isFullScreen = false
document.querySelector(".minimize").addEventListener("click", () => {
win.hide();
});
document.querySelector(".maximize").addEventListener("click", () => {
isFullScreen ? win.unmaximize() : win.maximize();
isFullScreen=!isFullScreen
})
document.querySelector(".close").addEventListener("click", () => {
win.hide();
win.setSkipTaskbar(true);
return false;
})

[abbaty48]

If you want to first use setResizable(false) and next time change it to setResizable(true) , you can use following code as replacement :

First time:

mainWindow = new BrowserWindow({
    resizable: true,
    frame: false,
    width: 400,
    height: 400,
    minHeight: 400,
    minWidth: 400,
    maxHeight: 400,
    maxWidth: 400,
    .
    .
    .
  });

Next time:

const { width, height } = screen.getPrimaryDisplay().workAreaSize;
mainWindow.setMaximumSize(width, height);
mainWindow.setSize(1024, 728);
mainWindow.center();

above code worked very good for me .

// HANDLE WINDOW MAXIMIZE OR RESTORE

ipcMain.handle('maximizeOrRestore', (_event, _maximize: boolean) => {
  const _target = BrowserWindow.fromWebContents(_event.sender);
  const { height, width } = screen.getPrimaryDisplay().workAreaSize;
  _target.setMaximumSize(width, height);

  if (_maximize) {
    const [minWidth, minHeight] = _target.getMinimumSize();
    _target.setSize(minWidth, minHeight);
    _target.center();
    return false;
  } else {
    _target.setSize(width, height);
    _target.center();
    return true;
  }
});

[abbaty48]

If you want to first use setResizable(false) and next time change it to setResizable(true) , you can use following code as replacement :

First time:

mainWindow = new BrowserWindow({
    resizable: true,
    frame: false,
    width: 400,
    height: 400,
    minHeight: 400,
    minWidth: 400,
    maxHeight: 400,
    maxWidth: 400,
    .
    .
    .
  });

Next time:

const { width, height } = screen.getPrimaryDisplay().workAreaSize;
mainWindow.setMaximumSize(width, height);
mainWindow.setSize(1024, 728);
mainWindow.center();

above code worked very good for me .

// HANDLE WINDOW MAXIMIZE OR RESTORE

ipcMain.handle('maximizeOrRestore', (_event, _maximize: boolean) => {
  const _target = BrowserWindow.fromWebContents(_event.sender);
  const { height, width } = screen.getPrimaryDisplay().workAreaSize;
  _target.setMaximumSize(width, height);

  if (_maximize) {
    const [minWidth, minHeight] = _target.getMinimumSize();
    _target.setSize(minWidth, minHeight);
    _target.center();
    return false;
  } else {
    _target.setSize(width, height);
    _target.center();
    return true;
  }
});

[OmBayus]

use setFullScreen(true) instead of maximize()

win.setFullScreen(true);