Add missing Webkit prefixes for older Chrome.

Author: hasparus

src/components/index-page/hero.tsx

@@ -47,7 +47,9 @@ function HeroStripes() {
         className="relative h-full bg-gradient-to-b from-pri-base to-pri-lighter opacity-0 transition-opacity duration-[1.5s] [mask-position:center_12%] [mask-size:110%] data-[loaded=true]:opacity-100 dark:to-pri-base sm:[mask-size:auto_300%] lg:[mask-position:7%_7%] lg:[mask-size:200%]"
         style={{
           maskImage: `url(${logoBlurred.src})`,
+          WebkitMaskImage: `url(${logoBlurred.src})`,
           maskRepeat: "no-repeat",
+          WebkitMaskRepeat: "no-repeat",
         }}
       />
       <StripesDecoration

src/components/navbar/navbar.tsx

@@ -223,8 +223,10 @@ export function Navbar({ items }: NavBarProps): ReactElement {
 }
 
 function BackdropBlur() {
-  const mask = "linear-gradient(to bottom, #000 0% 50%, transparent 50% 100%)"
   const thickness = "1px"
+
+  const mask = "linear-gradient(to bottom, #000 0% 50%, transparent 50% 100%)"
+  const edgeMask = `linear-gradient(to bottom, black 0, black ${thickness}, transparent ${thickness})`
   return (
     <>
       <div
@@ -240,7 +242,8 @@ function BackdropBlur() {
         className="pointer-events-none absolute inset-0 h-full translate-y-full bg-white/10"
         style={{
           backdropFilter: "blur(8px) brightness(120%) saturate(113%)",
-          maskImage: `linear-gradient(to bottom, black 0, black ${thickness}, transparent ${thickness})`,
+          maskImage: edgeMask,
+          WebkitMaskImage: edgeMask,
         }}
       />
     </>