From 4fc6efe7dd7635d51ba1ea72f6ce61e446abd161 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20=20Sk=C3=B6ld?= <lucasskold49@gmail.com>
Date: Tue, 18 Mar 2025 18:52:59 +0100
Subject: [PATCH] Enhance overlay positioning logic in textHighlight.js for
 improved performance and reliability

---
 web/js/textHighlight.js | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/web/js/textHighlight.js b/web/js/textHighlight.js
index 7cb4c18..f56aa76 100644
--- a/web/js/textHighlight.js
+++ b/web/js/textHighlight.js
@@ -636,14 +636,29 @@ function hideTagTooltip() {
 }
 
 function setOverlayPosition(inputEl, overlayEl) {
+    // Skip if elements don't exist or aren't in the DOM
+    if (!inputEl || !overlayEl || !document.contains(inputEl)) return;
     const textareaStyle = window.getComputedStyle(inputEl);
-    overlayEl.style.left = textareaStyle.left;
-    overlayEl.style.top = textareaStyle.top;
-    overlayEl.style.width = textareaStyle.width;
-    overlayEl.style.height = textareaStyle.height;
-    overlayEl.style.display = textareaStyle.display;
-    overlayEl.style.transform = textareaStyle.transform;
-    overlayEl.style.transformOrigin = textareaStyle.transformOrigin;
+
+    // Use requestAnimationFrame for smooth visual updates
+    requestAnimationFrame(() => {
+        const newPosition = {
+            left: textareaStyle.left,
+            top: textareaStyle.top,
+            width: textareaStyle.width,
+            height: textareaStyle.height,
+            display: textareaStyle.display,
+            transform: textareaStyle.transform,
+            transformOrigin: textareaStyle.transformOrigin,
+        };
+
+        // Only apply changes if needed
+        for (const [prop, value] of Object.entries(newPosition)) {
+            if (overlayEl.style[prop] !== value) {
+                overlayEl.style[prop] = value;
+            }
+        }
+    });
 }
 
 function setOverlayStyle(inputEl, overlayEl) {