Fix some size and positioning issues related to imposter element

1 files changed, 16 insertions, 5 deletions

diff --git a/ext/fg/js/document.js b/ext/fg/js/document.js
index 8a412f96..962592ec 100644
--- a/ext/fg/js/document.js
+++ b/ext/fg/js/document.js
@@ -17,16 +17,15 @@
  */
 
 
-function docOffsetCalc(element) {
+function docOffsetCalc(elementRect) {
     const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
     const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
 
     const clientTop = document.documentElement.clientTop || document.body.clientTop || 0;
     const clientLeft = document.documentElement.clientLeft || document.body.clientLeft || 0;
 
-    const rect = element.getBoundingClientRect();
-    const top  = Math.round(rect.top +  scrollTop - clientTop);
-    const left = Math.round(rect.left + scrollLeft - clientLeft);
+    const top  = Math.round(elementRect.top +  scrollTop - clientTop);
+    const left = Math.round(elementRect.left + scrollLeft - clientLeft);
 
     return {top, left};
 }
@@ -38,7 +37,8 @@ function docImposterCreate(element) {
         stylePairs.push(`${key}: ${styleProps[key]};`);
     }
 
-    const offset = docOffsetCalc(element);
+    const elementRect = element.getBoundingClientRect();
+    const offset = docOffsetCalc(elementRect);
     const imposter = document.createElement('div');
     imposter.className = 'yomichan-imposter';
     imposter.innerText = element.value;
@@ -48,11 +48,22 @@ function docImposterCreate(element) {
     imposter.style.left = `${offset.left}px`;
     imposter.style.opacity = 0;
     imposter.style.zIndex = 2147483646;
+    imposter.style.margin = '0';
     if (element.nodeName === 'TEXTAREA' && styleProps.overflow === 'visible') {
         imposter.style.overflow = 'auto';
     }
 
     document.body.appendChild(imposter);
+
+    // Adjust size
+    const imposterRect = imposter.getBoundingClientRect();
+    if (imposterRect.width !== elementRect.width || imposterRect.height !== elementRect.height) {
+        const width = parseFloat(styleProps.width) + (elementRect.width - imposterRect.width);
+        const height = parseFloat(styleProps.height) + (elementRect.height - imposterRect.height);
+        imposter.style.width = `${width}px`;
+        imposter.style.height = `${height}px`;
+    }
+
     imposter.scrollTop = element.scrollTop;
     imposter.scrollLeft = element.scrollLeft;