electron: BrowserView autoResize doesn't work correctly in some cases and BrowserView shrinks

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: confirmed in 8.0.1, 7.1.2, 5.0.7, 4.0.0
Operating System: Windows 10

Expected Behavior

I have a BrowserView that is configured to resize with the window. I have a resize handler on the BrowserWindow that in some cases calls setBounds/setSize to change the size of the window.

I expect the BrowserView to resize with the window.

Actual Behavior

The BrowserView doesn’t resize correctly and shrinks.

To Reproduce

Download the quickstart app. Replace main.js with:

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

async function createWindow() {
  const mainWindow = new BrowserWindow({ backgroundColor: "#000" });
  const view = new BrowserView();
  mainWindow.setBrowserView(view);

  const contentBounds = mainWindow.getContentBounds();
  view.setBounds({ x: 0, y: 0, width: contentBounds.width, height: contentBounds.height });
  view.setAutoResize({ width: true, height: true });

  await view.webContents.loadURL("https://google.com");

  mainWindow.once("maximize", () => {
    mainWindow.once("resize", () => {
      mainWindow.setSize(1000, 1000);
      setTimeout(() => {
        console.log(mainWindow.getBounds()); // logs what it used to be at {x: 914, y: 62, width: 800, height: 600}
        console.log(view.getBounds()); // bounds are not resized correctly: {x: 0, y: 0, width: 0, height: 145}
      }, 1000);
    });
  });
}

app.on('ready', createWindow)

Run npm start, maximize the window to set up the resize handler, and then unmaximize it.

Observe all the black space in the window where you would expect to see the browser view (google).

Another thing to note is how the window size doesn’t increase to 1000x1000 and stays whatever size it was. It does look like the BrowserView size increases, and it ends up out of sync with the window.

Maybe the issue isn’t about the BrowserView, but more about the window size not increasing.

Gif

browserview_resize_issue

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 9
Comments: 25 (4 by maintainers)

Most upvoted comments

use this this works

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({ useContentSize: true });
  const view = new BrowserView();
  mainWindow.setBrowserView(view);
  view.setBounds({ x: 0, y: 0, width: 800, height: 600 });
  view.setAutoResize({ width: true, height: true });
  view.webContents.loadURL("https://youtube.com");
}

+10

ghost on Aug 4, 2021

@codebytere Your PR #34581 fixes the case where setBounds is called on a view, but not when AutoResize is called.

Using this change, I made a temporary fix in my project that basically forces the layout/paint by setting the bounds to the ones returned by getBounds.

const mainWindow = new BrowserWindow({ backgroundColor: "#000" });
const view = new BrowserView();
mainWindow.setBrowserView(view);

const contentBounds = mainWindow.getContentBounds();
view.setBounds({ x: 0, y: 0, width: contentBounds.width, height: contentBounds.height });
view.setAutoResize({ width: true, height: true });

let lastHandle;
function handleWindowResize(e) => {
  e.preventDefault();
  
  // the setTimeout is necessary because it runs after the event listener is handled
  lastHandle = setTimeout(() => {
    if (lastHandle != null) clearTimeout(lastHandle);
    view.setBounds(view.getBounds());
  });
};

mainWindow.on("resize", handleWindowResize);

As this is the case, I believe that by adding these lines: https://github.com/electron/electron/blob/02a5d6cb55a76f491ca7833ec3c05de391900661/shell/browser/native_browser_view_views.cc#L133-L137

after this line: https://github.com/electron/electron/blob/02a5d6cb55a76f491ca7833ec3c05de391900661/shell/browser/native_browser_view_views.cc#L112

should fix this issue, or at least ones similar to it.

chase on Jul 13, 2022

@qparas What is the piece that makes this work exactly? I am basically doing this already except for the useContentSize property, which I don’t want to use.

yes the “{ useContentSize: true }” part

ghost on Aug 4, 2021

@chase , your code fixed my issue, thanks! (in my code autoResize didn’t work with maximize, now it works). Also I used usual Electron 20.0.2 without additional patches

safinaskar on Aug 15, 2022

Same in 12.0.1.

pablo1v on Mar 21, 2021

Looks like BV auto resizing is broken in Electron 30. We’re seeing two behaviors: (1) vertical resizing of parent isn’t being respected, (2) vertical and horizontal dimensions shrink when the parent window’s top/left are changed without height/width changing - i.e. when moving a window (smells like an off by one pixel issue).

WebContentsView doesn’t seem to support auto-resize which is an unfortunate loss 😦 The BV’s auto-resizing is very smooth by comparison.

https://github.com/electron/electron/assets/1657084/7569f993-37ed-476d-81bb-5c61095d6e7c

thorsent on Apr 29, 2024

Wrapping the setSize call in a setTimeout(, 0) works around the issue

pushkin- on Feb 13, 2020