perf: add perf hint and GPU acceleration

dulapahv · Dec 29, 2024 · 28c6bf1 · 28c6bf1
1 parent 88fd645
commit 28c6bf1
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/client/src/components/monaco/utils.ts b/client/src/components/monaco/utils.ts
@@ -1,6 +1,7 @@
 /**
  * Creates CSS styles for a user's cursor in the collaborative editor.
  * Generates cursor highlight and nametag styles with fade-out animation.
+ * Optimized with GPU acceleration and performance hints.
  *
  * @param userID - Unique identifier for the user's cursor
  * @param bgColor - Background color for cursor and nametag
@@ -39,6 +40,9 @@ export const createCursorStyle = (
   .cursor-${userID} {
     background-color: ${bgColor} !important;
     width: 2px !important;
+    will-change: transform, opacity;
+    transform: translateZ(0);
+    backface-visibility: hidden;
   }
   .cursor-${userID}::before {
     content: "";
@@ -48,7 +52,9 @@ export const createCursorStyle = (
     width: 6px;
     height: 6px;
     background-color: ${bgColor};
-    transform: translateY(-100%);
+    transform: translate3d(0, -100%, 0);
+    will-change: transform;
+    backface-visibility: hidden;
     z-index: 100;
   }
   .cursor-${userID}::after {
@@ -63,6 +69,9 @@ export const createCursorStyle = (
     padding: 0 4px;
     ${isFirstLine ? 'border-radius: 0px 3px 3px 3px;' : 'border-radius: 3px 3px 3px 0px;'}
     white-space: nowrap;
+    transform: translateZ(0);
+    will-change: transform, opacity;
+    backface-visibility: hidden;
     z-index: 100;
     ${
       !hasSelection
@@ -76,4 +85,7 @@ export const createCursorStyle = (
     background-color: ${bgColor};
     opacity: 0.4;
     min-width: 4px;
-  }`;
+    will-change: transform, opacity;
+    transform: translateZ(0);
+    backface-visibility: hidden;
+  }`;