[Bug]: White frames appear when adding BrowserView with already loaded page

[Imperat]

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 a bug report that matches the one I want to file, without success.

Electron Version

20.1.4

What operating system are you using?

macOS

Operating System Version

Ventura 13.2

What arch are you using?

x64

Last Known Working Electron version

No response

Expected Behavior

In my use case, I need to keep BrowserViews in memory and switch them.
To switch I use removeBrowserView and setBrowserView APIs like this:

    win.removeBrowserView(view1);
    win.setBrowserView(view2);

I expect that this switching will be experienced by users as tab switching in the browser. For example, if you open two tabs
https://www.electronjs.org/ & https://www.electronjs.org/docs/latest/api/app, and will start switching between them you will notice that the website header remains black (for this specific example with electronjs.rg).

In my use case, I need to add BrowserView with an already loaded page to the window. When I do this I am able to notice a white glitch even though I set another color as a background color for the window.
This bug is not reproducible if hardware acceleration is turned off. (app.disableHardwareAcceleration())

Actual Behavior

It works as desired on Windows 11.
On MacOS some white frames appear and make the user's experience less native.

Screen.Recording.2023-02-09.at.3.36.08.pm.mov

Can we get it fixed or give me suggestions on how I can perform a workaround, please?

Testcase Gist URL

https://gist.github.com/0c99927c913ac5971facd861dd656d8b

Additional Information

No response

[Prinzhorn]

Does addBrowserView + setTopBrowserView (alternatively move views out of bounds to hide them) work?

FWIW I don't see any flashing on Ubuntu. Also Electron 20 is EOL.

[Imperat]

Hey @Prinzhorn
Thanks for your reply!
addBrowserView + setTopBrowserView works.
However, pages may have transparent background and it causes the pages to overlay each other:

This is not something desired

[Prinzhorn]

Either make it white via https://www.electronjs.org/docs/latest/api/browser-view#viewsetbackgroundcolorcolor-experimental or maybe try my other suggestion and translate the "invisible" views off-screen using setBounds. These are the same techniques you'd use in CSS for high-performance flicker-free switching of items (e.g. translate(x,y) them off-screen).

[Imperat]

Hello,
I wanted to clarify the steps to reproduce via another fiddle: https://gist.github.com/Imperat/ad54907ca6e8d1167c5bde6a6bf389ac

Every time when I add a new browserView on top of another browserView the white glitch appears.
I want to fix it somehow without having all the browserView's attached. After I made some measures I found out the app consumes more resources when the window has attached multiple browserView's at the same time.

In my use case, we have a tab management feature, which does not look native when the user switches between tabs.

[Imperat]

The way to reproduce it with one BrowserView instance.

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

app.whenReady().then(async () => {
  const win = new BrowserWindow({ 
    width: 800, 
    height: 600, 
    backgroundColor: 'black'
  })

  const view1 = new BrowserView()
  view1.setBackgroundColor('white');
  win.addBrowserView(view1);
  view1.setBounds({ x: 0, y: 0, width: 800, height: 600 })
  await view1.webContents.loadURL('https://electronjs.org/')

  setInterval(() => {
    win.removeBrowserView(view1);
    setTimeout(() => {
      win.addBrowserView(view1);
    }, 1000);
  }, 3000);
})

[Imperat]

I noticed that setTopBrowserView was added to Electron here by @stewartlord with the note:

Removing and re-adding a view also works but has the problem of introducing a noticeable flicker.

cc @stewartlord @codebytere Do you think we can fix it somehow in Electron? After a quick reading of Electron's source code, I think this is a Chromium bug. If you have any recommendations on what should be our next steps it will be very helpful!

[kevinlinv]

I also found an error logged every time the view flickers on Fiddle.

[39915:0317/095700.282818:ERROR:shared_image_manager.cc(267)] SharedImageManager::ProduceOverlay: Trying to Produce a Overlay representation from a non-existent mailbox.
[39915:0317/095700.282829:ERROR:skia_output_device_buffer_queue.cc(354)] Invalid mailbox.

[kevinlinv]

@Imperat

A trick to move the bounds around within a short timeout allows for a workaround for the code sample you added.

code snippet

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

app.whenReady().then(async () => {
  const win = new BrowserWindow({ 
    width: 800, 
    height: 600, 
    backgroundColor: 'black'
  })

  const view1 = new BrowserView()
  view1.setBackgroundColor('white');
  win.addBrowserView(view1);
  view1.setBounds({ x: 0, y: 0, width: 800, height: 600 })
  await view1.webContents.loadURL('https://electronjs.org/')

  setInterval(() => {
    win.removeBrowserView(view1);
    
    setTimeout(() => {
      win.addBrowserView(view1);
      view1.setBounds({ x: 800, y: 0, width: 800, height: 600 })
      setTimeout(() => view1.setBounds({ x: 0, y: 0, width: 800, height: 600 }), 20)
    }, 1000);
  }, 3000);
})

Perhaps there is an underlying race condition here?

[kevinlinv]

Upon further testing, the workaround above only works on high-end Macs. Glitches will still appear on lower-end devices where the amount of resources is less. 😢

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. If you have any new additional information—in particular, if this is still reproducible in the latest version of Electron or in the beta—please include it with your comment!

[Imperat]

bump

[Imperat]

Hi team,
In an attempt to fix this issue I tried to develop a single API to replace browserView's.
Please, have a look at implementation of ReplaceBrowserView in PR from my fork

I use TakeFallbackContentFrom to avoid the glitch, but it doesn't seem enough.

I used this code to reproduce (it is compatible with my custom build and official one):

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

const WIDTH = 300;
const HEIGHT = 200;
app.whenReady().then(() => {
  const win = new BrowserWindow({ width: WIDTH, height: HEIGHT })

  const view1 = new BrowserView()
  win.setBrowserView(view1)
  view1.setBounds({ x: 0, y: 0, width: WIDTH, height: HEIGHT })
  view1.webContents.loadURL('https://electronjs.org')

  const view2  = new BrowserView();
  win.setBrowserView(view2);
  view2.setBounds({ x: 0, y: 0, width: WIDTH, height: HEIGHT });
  view2.webContents.loadURL('https://www.electronjs.org');

  const show1 = () => {
    if (win.replaceBrowserView) {
      win.replaceBrowserView(view2, view1);
    } else {
      win.removeBrowserView(view1);
      win.setBrowserView(view2);
    }
  };

  const show2 = () => {
    if (win.replaceBrowserView) {
      win.replaceBrowserView(view1, view2);
    } else {
      win.removeBrowserView(view2);
      win.setBrowserView(view1);
    }
  };

  let check = true;
  setInterval(() => {
    check = !check;
    const func = check ? show2 : show1;
    func();
  }, 100);
})


app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

Do you have any other recommendations or ideas?

[Imperat]

Also, I tried to use a short delay (100ms) before showing new contents after it is attached.
I placed sources in this PR and it seems to work well.

However, it reminds me the same hack @kevinlinv described above. Probably it will not work in lower-end devices where the amount of resources is less.

I am interested if there is any other way to wait for content to be painted rather than use hard-coded delay? 🤔

[olegyadrov-bluescape]

Bump

[OldDream]

same problem here

[XiaoBaiClassmate]

same problem here.
Is there a solution?

[lauri865]

Echo that. Makes the UI look very buggy, unfortunately. Haven't found any good workarounds yet.

[Imperat]

To locate root reason for this bug I tried to dig into Chromium sources to see how tab switching implemented in browser itself, but I was not quite successful in this endeavor. If someone more experienced with Chromium codebase is reading this comment, please advice where to look for 🙏

[electron-issue-triage]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. If you have any new additional information—in particular, if this is still reproducible in the latest version of Electron or in the beta—please include it with your comment!

[Imperat]

bump