From 09ea3c28a4cbfe1f8652129a6287c4d68cff1e9b Mon Sep 17 00:00:00 2001
From: Ivan Zinchenko <zinchenko291@gmail.com>
Date: Fri, 2 Oct 2026 21:17:14 +0300
Subject: [PATCH] fix: disable skew-y-[-18deg] in gecko browsers (#962)

Firefox/Gecko suffers severe scrolling jank on the documentation pages because of the large decorative SVG in the page header.

The SVG uses both:

- `mix-blend-mode: overlay`
- `transform: skewY(-18deg)`

Removing only the transform (`skew-y-[-18deg]`) for firefox-base browsers makes scrolling smooth immediately.

Reproduced in:
- Firefox on Windows
- Zen on Windows
- Zen on macOS

Chromium is unaffected.
---
 src/components/HeroPattern.jsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/HeroPattern.jsx b/src/components/HeroPattern.jsx
index fabc5ae0..c8187a23 100644
--- a/src/components/HeroPattern.jsx
+++ b/src/components/HeroPattern.jsx
@@ -15,7 +15,17 @@ export function HeroPattern() {
             [7, 3],
             [10, 6],
           ]}
-          className="absolute inset-x-0 inset-y-[-50%] h-[200%] w-full skew-y-[-18deg] fill-black/40 stroke-black/50 mix-blend-overlay dark:fill-white/2.5 dark:stroke-white/5"
+          className="absolute
+            inset-x-0
+            inset-y-[-50%]
+            h-[200%]
+            w-full
+            skew-y-[-18deg]
+            supports-[(-moz-appearance:none)]:skew-y-0
+            fill-black/40
+            stroke-black/50
+            mix-blend-overlay
+            dark:fill-white/2.5 dark:stroke-white/5"
         />
       </div>
       <div className="absolute inset-x-0 top-0 h-[25rem] dark:[mask-image:linear-gradient(white,transparent)] pointer-events-none z-10">