fix: get in touch anti aliasing (#115)

olekbaran · Nov 1, 2024 · 6ba941e · 6ba941e
1 parent 55b5cac
commit 6ba941e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/components/common/get-in-touch.tsx b/components/common/get-in-touch.tsx
@@ -35,7 +35,7 @@ function GetInTouch() {
     <div className="relative overflow-hidden py-[5vw] md:py-[3vw]">
       <Link
         href={routes.contact.pathname}
-        className="absolute bottom-auto h-11 w-full rotate-3 scale-110 transform-gpu md:h-[5.5rem] md:scale-105"
+        className="anti-aliasing absolute bottom-auto h-11 w-full rotate-3 scale-110 transform-gpu md:h-[5.5rem] md:scale-105"
         aria-hidden
       >
         <DuctTape variant="secondary">
@@ -44,7 +44,7 @@ function GetInTouch() {
       </Link>
       <Link
         href={routes.contact.pathname}
-        className="h-[2.875rem] w-full -rotate-3 scale-110 transform-gpu border border-gray md:h-[5.625rem] md:scale-105"
+        className="anti-aliasing h-[2.875rem] w-full -rotate-3 scale-110 transform-gpu border border-gray md:h-[5.625rem] md:scale-105"
       >
         <DuctTape>
           <DuctTapeContent />

diff --git a/styles/globals.css b/styles/globals.css
@@ -22,3 +22,15 @@
       "calt" 1;
   }
 }
+
+@layer components {
+  .anti-aliasing {
+    outline: 1px solid transparent;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0);
+    will-change: transform;
+    -webkit-perspective: 1000;
+    perspective: 1000;
+  }
+}