Repaint BrowserWindow while it's hidden?


#1

Hi there!

I’m wondering if there is any way (event, method) to make a BrowserWindow repaint while it’s hidden?

My problem is, that I have window and when I switch the macOS dark mode on or off, I add a class to the DOM root element so that it’s appearance will adjust to the new dark mode settings. But when I open the window again, there is a short flash of the old styles. I don’t mean to be picky but is there any way I can avoid that?

Thanks for your help guys!


#2

I’m getting this with my app as well, not the macOS dark thing, but with updating my UI. The UI is still updated, but the window is not repainted if it’s hidden.

I may be wrong, but I think there’s no way around this because of the performance changes since macOS 10.10 (or 10.11?) which reduced the activity of apps in the background, and I believe the effect this has on Electron is that it waits to repaint until the window is shown. Then again, it could be something else, it may be fault of Electron itself, but it’s the conclusion I’ve made. Personally, I’d prefer better performance for the user.

Edit: Is anyone getting the issue on another platform? If it’s limited to macOS then it’s likely that it’s because of the system trying to maximize performance.


#3

I just made an interesting discovery. I used the electron-quick-start example app and changed the app.on('ready', …) callback to this: https://gist.github.com/mzdr/b223a9d7c73d1b0e901b5d2215c70aac

Somehow, if you call mainWindow.reload() before showing or updating the window styles/content, will actually prevent any flickering. Does this make any sense at all? Seems to me like this magically calls or prepares a repaint?!


#4

Well, I don’t know about that. According to the docs, window.reload calls window.webContents.reload, which just reloads the page, which is not a solution for many people (myself included) since you lose any changes made on your page. Essentially, you just restarted your app with window.reload.

Maybe you could try using JavaScript to force a repaint, and do it on the body:

document.body.style.display = 'none';
document.body.style.display = 'block';

I’ll try this out later myself, I’m not at my Mac right now.


#5

Hey there!

I just tried it, but had no luck. I know the reload is not a solution, not for me as well. Do you know if there are some Electron developers around here who can give some insight? Otherwise I would open up a ticket on GitHub. Maybe we’ll get some attention over there…


#6

What about trying with backgroundThrottling = false when you create the BrowserWindow?
Page visibility