Moving overlay elements to target every seconds, so it wont slip

stable.user.js

@@ -101,6 +101,11 @@
   var lastestVersion = ''
   var subjInfo
 
+  // array, where elems are added to shadow-root, but its position should be at target.
+  var updatableElements = [] // { elem: ..., target: ... }
+  var elementUpdaterInterval = -1
+  const overlayElemUpdateInterval = 2 // seconds
+
   if (getVal('ISDEVEL')) {
     console.log('Moodle script running in developement mode!')
     infoExpireTime = 1
@@ -362,24 +367,33 @@
     overlay.appendChild(toAppend)
   }
 
-  function createHoverOver(target) {
+  function createHoverOver(appendTo) {
     const overlayElement = document.createElement('div')
     overlay.append(overlayElement)
-    let currX, currY, currWidth, currHeight
-    let { left, top, width, height } = target.getBoundingClientRect()
-    left += window.scrollX
-    top += window.scrollY
 
-    SetStyle(overlayElement, {
-      pointerEvents: 'none',
-      userSelect: 'none',
-      position: 'absolute',
-      zIndex: 999999,
-      top: top + 'px',
-      left: left + 'px',
-      width: width + 'px',
-      height: height - 10 + 'px',
-    })
+    updatableElements.push({ elem: overlayElement, target: appendTo })
+
+    if (elementUpdaterInterval === -1) {
+      elementUpdaterInterval = setInterval(() => {
+        updatableElements.forEach(({ elem, target }) => {
+          let currX, currY, currWidth, currHeight
+          let { left, top, width, height } = target.getBoundingClientRect()
+          left += window.scrollX
+          top += window.scrollY
+
+          SetStyle(elem, {
+            pointerEvents: 'none',
+            userSelect: 'none',
+            position: 'absolute',
+            zIndex: 999999,
+            top: top + 'px',
+            left: left + 'px',
+            width: width + 'px',
+            height: height - 10 + 'px',
+          })
+        })
+      }, overlayElemUpdateInterval * 1000)
+    }
 
     return overlayElement
   }