add visibility check

Author: Sebi Nemeth

dist/index.js

@@ -259,19 +259,26 @@ class LiveTranslatorManager {
             if (badges.length) {
                 let position = { top: 0, left: 0 };
                 try {
+                    let isVisible;
                     if (node instanceof Text) {
                         const clientRect = getBoundingClientRect(node);
                         position.top = clientRect.top + window.scrollY;
                         position.left = clientRect.left + window.screenX;
+                        isVisible = node.parentElement.contains(document.elementFromPoint(clientRect.left + clientRect.width / 2, clientRect.top + clientRect.height / 2));
                     }
                     else {
                         const clientRect = node.getClientRects()[0];
                         position.top = clientRect.top + clientRect.height - 10 + window.scrollY;
                         position.left = clientRect.left + window.screenX;
+                        isVisible = node.contains(document.elementFromPoint(clientRect.left + clientRect.width / 2, clientRect.top + clientRect.height / 2));
+                    }
+                    if (!isVisible) {
+                        continue;
                     }
                 }
                 catch (error) {
                     // console.warn('Could not get bounding box for', node);
+                    continue;
                 }
                 const container = document.createElement('span');
                 container.classList.add('live-translator-badge-container');

src/index.ts

@@ -305,17 +305,28 @@ class LiveTranslatorManager {
       if (badges.length) {
         let position = { top: 0, left: 0}
         try {
+          let isVisible
           if (node instanceof Text) {
             const clientRect = getBoundingClientRect(node)
             position.top = clientRect.top + window.scrollY
             position.left = clientRect.left + window.screenX
+            isVisible = node.parentElement.contains(
+              document.elementFromPoint(clientRect.left + clientRect.width/2, clientRect.top + clientRect.height/2)
+            )
           } else {
             const clientRect = node.getClientRects()[0]
             position.top = clientRect.top + clientRect.height - 10 + window.scrollY
             position.left = clientRect.left + window.screenX
+            isVisible = node.contains(
+              document.elementFromPoint(clientRect.left + clientRect.width/2, clientRect.top + clientRect.height/2)
+            )
+          }
+          if (!isVisible) {
+            continue
           }
         } catch (error) {
           // console.warn('Could not get bounding box for', node);
+          continue
         }
         const container = document.createElement('span')
         container.classList.add('live-translator-badge-container')