fix: enhance Safari rendering

Author: swernerx

demo-tailwind/src/main.css

@@ -10,3 +10,8 @@ body {
     "Segoe UI",
     sans-serif;
 }
+
+/* Safari: stabilize drop-shadow during scroll */
+[class*="drop-shadow-effective"] {
+  will-change: filter;
+}

demo/src/App.tsx

@@ -293,6 +293,12 @@ function SectionBoxVsDrop() {
           <code>filter: drop-shadow()</code> — it's the only option that follows
           non-rectangular shapes.
         </p>
+        <p>
+          <strong>Safari tip:</strong> Add <code>will-change: filter</code> to
+          elements using <code>drop-shadow()</code> to prevent rendering
+          glitches during scroll. This promotes the element to its own
+          compositing layer.
+        </p>
       </div>
 
       <div className="prose" style={{ marginTop: 32 }}>

demo/src/components/ComparisonTechniques.tsx

@@ -28,7 +28,9 @@ function ComparisonColumn({
           className="comparison-card"
           style={{
             boxShadow: item.boxShadow,
-            filter: item.filter
+            filter: item.filter,
+            // Safari: stabilizes drop-shadow during scroll
+            willChange: item.filter ? "filter" : undefined
           }}
         >
           <span>{item.name}</span>

demo/src/components/Playground.tsx

@@ -339,7 +339,10 @@ const dropShadow = toDropShadow(shadow${colorArg})`
           <div className="playground-preview">
             <div
               className="playground-card"
-              style={{ filter: dropShadowCSS }}
+              style={{
+                filter: dropShadowCSS,
+                willChange: "filter" // Safari: stabilizes drop-shadow during scroll
+              }}
             />
           </div>
         </div>

demo/src/style.css

@@ -1332,6 +1332,7 @@ body {
 .glow-btn-filter {
   box-shadow: none;
   filter: var(--btn-filter);
+  will-change: filter; /* Safari: stabilizes drop-shadow during scroll */
 }
 
 .glow-btn:hover {