feat: better blur performance on Safari (#104)

QuiiBz · Sep 7, 2024 · fce014d · fce014d
1 parent 5aad83b
commit fce014d
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 0 deletions.
diff --git a/apps/dashboard/src/lib/__tests__/elements.test.ts b/apps/dashboard/src/lib/__tests__/elements.test.ts
@@ -126,6 +126,7 @@ describe("createElementStyle", () => {
         "position": "absolute",
         "top": "20px",
         "width": "100px",
+        "willChange": "filter",
       }
     `);
   });

diff --git a/apps/dashboard/src/lib/elements.ts b/apps/dashboard/src/lib/elements.ts
@@ -168,6 +168,7 @@ export function createElementStyle(element: OGElement): CSSProperties {
       element.rotate !== 0 ? `rotate(${element.rotate}deg)` : undefined,
     boxShadow: boxShadows.length ? boxShadows.join(", ") : undefined,
     filter: element.blur !== 0 ? `blur(${element.blur}px)` : undefined,
+    willChange: element.blur !== 0 ? "filter" : undefined,
   };
 
   if (element.tag === "p" || element.tag === "span") {