Maximized/fullscreen window leaves 1px space on right/bottom borders

[njbmartin]

• Electron version: 1.4.13
• Operating system: Win10 (64-bit)

Expected behavior

On a 4k display, browserWindow.setFullscreen() should make the window full screen, without rendering a window border.

Actual behavior

When the window goes fullscreen, a white line is rendered on the right and bottom of the screen.

How to reproduce

This can be observed by setting Visual Studio Code fullscreen.

[njbmartin]

I tried it initially on a 4K monitor which shows the white border, whereas a standard 1080p or Ultra-wide display monitor doesn't render the white borders.

[njbmartin]

To further add to this, it's related to the display scaling as setting the scaling to 100% no longer shows the pixel white bar.

[kevinsawicki]

@bsclifton do you think this could be resolved by #8404 or is this something you'd made a different fix for in Brave? Thanks.

[bsclifton]

@kevinsawicki it's VERY likely that #8404 fixed this issue 😄

To help further characterize the issue I saw (which prompted the fix): on Chromium 54, we only saw the issue when maximized (not fullscreen). I wish I had tested it on Chromium 53. If I had to guess, it was likely similar behavior to what was reported in this issue (based on issues logged in our repo)

(The fix in #8404 should work for both fullscreen and maximized)

[kevinsawicki]

@njbmartin are you able to build the master branch of Electron and see if you can still reproduce this issue?

[njbmartin]

I shall give it a go a little later

[kevinsawicki]

@njbmartin can you see if this is still happening with Electron 1.5.0?

[njbmartin]

It still occurs on 1.5.0. It also turns out that it's not specifically rendering a white line, it's actually rendering whatever is underneath it, so when it goes full screen it doesn't actually take up the whole screen.

[kevinsawicki]

@njbmartin can you include a screenshot? Thanks.

[njbmartin]

Better than a screenshot, here's a video:
https://www.dropbox.com/s/9yn0juqqwbnbrzt/electron-line-render.webm?dl=0

There's definitely some odd behaviour, because when you hold alt and press tab (ie don't actually switch), it fixes itself. Same for when you switch to a different window/app. Demonstrated in the video.

[zcbenz]

I believe this is a off-by-one error in Chromium when calculating real window size from DIP size under HiDPI displays.

[itsnzsaad]

Experiencing this issue

[phtdacosta]

Two years after the first comment and that bug still annoying.
Any real clue on where the problem is or how can we could start solving it? I am no Chromium expert so I don't even guess how that can be happening.

[Ben-Fields]

This is still an issue in v4.0.2.
I can confirm that the relationship between the window size and content size is inconsistent.
The effect can be seen with a simple inset border: outline: 1px solid red; outline-offset: -1px;. Here's an animated gif:

The values are from BrowserWindow.getSize() and BrowserWindow.getContentSize() respectively.
Also of note, the output of getSize() may repeatedly change by 1px when the window is moved.
The above can be replicated on Windows 10 scaled 125%. Likely related to #10862.

[kanlukasz]

i have the same problem in VS Code:

really annoying...

[mxrsoon]

I'm experiencing this issue in Electron 7.1.2 on a Linux system by running Electron through xinit.

Even if I manually set the bounds to { x: 0, y: 0, width: 1920, height: 1080 }, the issue still occurs. A workaround is adding 1px to width and height, but I'm not really sure if it will be off on other displays.

This issue is distro-agnostic as I've experienced it on Ubuntu-based distros and Arch Linux.

It's an old issue. I will appreciate if someone found a more stable workaround or the issues' root.

[kanlukasz]

i have the same problem in VS Code:

really annoying...

just for information: In VSCode bug is fixed

[mxrsoon]

In my case, the issue occurs on Linux and on standard Full HD displays, without any scaling applied, not only HiDPI ones. Should I open another issue? Or should this issue's labels be updated?

[phtdacosta]

@wazybr please, open another issue, at least it will shows the repository maintainers that this issue is indeed important enough to be solved, even almost 3 years after the first person noticed this issue.

PS: I wish I could help, but I am no expert in the Chromium engine and it is seems pretty much to be related to how the modified interface displays graphically, I just do not have a clue on where to look for it in the project.

[memeplex]

I also am experiencing this issue with vscode. Specially when I started it with a light theme and then switch to a dark one, the 1px border ugly contrasts with my pitch black screen bezels. My screen is hidpi (3000x2000) but I haven't tested this in a lower dpi one.

[memeplex]

@Ben-Fields do you know of any way to persist your inset border color setting to black so that my electron apps always start like that?

[Ben-Fields]

The issue persists in the current version of Electron. At 125% system scaling, the window may be expanded/shrinked by 1px, showing/hiding a 1px strip without any content. The reported values of the window size and content size are unaffected by the extra space. I built Electron when I first spotted the issue a year ago but did not find the relevant code causing the issue.

@memeplex If I understand correctly, the simplest way is probably to add the css I described above to each app yourself.

[memeplex]

@Ben-Fields I meant to specifically ask how to do that, is there a standard place where to put that CSS so that any Electron app will be influenced by it? You seem to know a lot more than me about this technology.

[Solybum]

I never experienced this until after updating to windows 10 2004.

I get white borders on the left and right, only when launching a maximized window, if the window is maximized after launching the borders do not appear.

https://i.imgur.com/T7id63p.png

This affects VSCode as well as Discord (don't have any other electron app installed at the moment)

[emrezorlu]

Did you find a solution? Same problem exists in atom editor and whatsapp too.

[mxrsoon]

Not actively using Electron anymore, but will be glad to know if there's a solution.

[zcbenz]

This should have been fixed by #25052 and #25940.

[OldManMeta]

No - this is not fixed. Add this to the long list of running jokes - several years in.

[phtdacosta]

Silver tape spotted, have been working with Electron since late 2016 and it seems that is still a problem. Seems to be a problem with Chromium indeed and not really an Electron thing. Do not want to be unjust with the team as well.

[OldManMeta]

@phtdacosta - you're probably right. After dealing with awful docs, conflicting details and projects that overlap and never appear to get finished, I should go easy on everyone. I certainly would if this was just a small company striving to make a product without any funding - but the OpenJS Foundation receives around 2.5m each year in funding, and at least 250K of that comes from Google.

My point here is that this could be fixed, most like with some old fashioned phone calls and a line starting with something like 'did ya know that....'.

With respect to the team - you're 100% right. Not trying to prod any single individual here - just trying to provoke an ... "umm, yeah, perhaps we can get all of these little issues fixed, instead of adding new features" mentality that so many software projects suffer from.

Electron is a great idea, a great product and solution. Trying to get anything production done in it and over the line is like pulling teeth though. And it shouldn't be.

Cheers

[saintflow47]

I can confirm that this issue still exists for me on Windows 10 as of 07/12/2023 and Electron Version 25.2.0.

Additional Info: If the app is started in fullscreen, this does not happen for me. it only happens if i toggle between windowed and fullscreen.

[phtdacosta]

@saintflow47 open a new issue, as I mentioned here. Maybe if we spam them enough, they can give us at least a few hints on how could we could solve it ourselves, within the code web of such giant project.

@wazybr please, open another issue, at least it will shows the repository maintainers that this issue is indeed important enough to be solved, even almost 3 years after the first person noticed this issue.

PS: I wish I could help, but I am no expert in the Chromium engine and it is seems pretty much to be related to how the modified interface displays graphically, I just do not have a clue on where to look for it in the project.