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.

2 files changed, 11 insertions, 3 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);
   });
diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
index 06dc7fe..0187fee 100644
--- a/packages/renderer/src/components/BrowserViewPlaceholder.tsx
+++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
@@ -118,9 +118,6 @@ export const BrowserViewPlaceholder = observer(function BrowserViewPlaceholder()
     <Box
       sx={{
         flex: 1,
-        // Workaround: display a plain white background if we fail to set the BrowserView background color.
-        // https://github.com/electron/electron/issues/31019
-        background: '#fff',
       }}
       ref={ref}
     />