feat: Alternative background color workaround

Let's try injecting CSS to set the background color of html to
white (instead of transparent) into the loaded pages. The CSS is
injected before the website's own styles load, so they should always
have the lowest priority.

1 files changed, 11 insertions, 0 deletions

diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
index 857c15d..617a8dd 100644
--- a/packages/main/src/index.ts
+++ b/packages/main/src/index.ts
@@ -155,6 +155,17 @@ async function createWindow(): Promise<void> {
     }
   });
 
+  // Inject CSS to simulate `browserView.setBackgroundColor`.
+  // This is injected before the page loads, so the styles from the website will overwrite it.
+  browserView.webContents.on('did-navigate', () => {
+    browserView.webContents.insertCSS(
+      'html { background-color: #fff; }',
+      {
+        cssOrigin: 'author',
+      },
+    );
+  });
+
   autorun(() => {
     browserView.setBounds(store.shared.browserViewBounds);
   });