From 068cbdeae531ea39ef4c1b0ce3cc8caeaaadb1bc Mon Sep 17 00:00:00 2001
From: Nicholas <31909304+lauslim12@users.noreply.github.com>
Date: Sat, 7 Mar 2026 15:29:57 +0000
Subject: [PATCH] Fix Chrome/Blink rendering bug in dark mode in specific MacOS
 hardware profiles

---
 app/app.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/app.tsx b/app/app.tsx
index eaec7f5..e35b587 100644
--- a/app/app.tsx
+++ b/app/app.tsx
@@ -3,9 +3,20 @@ import { Header } from "~/header";
 
 /**
  * Speednote application.
+ *
+ * There is a known Chrome/Blink rendering bug on specific MacOS hardware profiles
+ * (notably i9 Intel/AMD GPUs) where transparent, stretched flex containers (`flex-1`)
+ * fail to composite correctly.
+ *
+ * The GPU attempts to optimize by skipping the paint for the empty stretched area,
+ * resulting in dead, uninitialized tiles that render as solid black horizontal bands.
+ *
+ * By explicitly declaring the background colors (`bg-gray-50 dark:bg-slate-950`)
+ * on this flex container, we force the hardware compositor to paint the tiles,
+ * bypassing the optimization glitch.
  */
 export const App = () => (
-	<div className="mx-auto flex min-h-screen max-w-7xl flex-col p-5">
+	<div className="mx-auto flex min-h-screen max-w-7xl flex-col bg-gray-50 p-5 dark:bg-gray-950">
 		<Header />
 
 		<main className="flex flex-1 flex-col px-0 py-8 sm:px-2 md:px-6 lg:px-12 xl:px-20">