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">