Change to using transform: translate(delta) for positioning relativ…

…e to current position

src/text-expander-element.ts

@@ -85,19 +85,9 @@ class TextExpander {
     this.expander.dispatchEvent(new Event('text-expander-activate'))
 
     const caretRect = new InputRange(this.input, match.position).getBoundingClientRect()
-    const nominalPosition = {top: caretRect.top + caretRect.height, left: caretRect.left}
-    menu.style.top = `${nominalPosition.top}px`
-    menu.style.left = `${nominalPosition.left}px`
-
-    // Nominal position is relative to entire document, but the menu could be positioned relative to a container if
-    // it is not `fixed` or on the top layer
-    const actualPosition = menu.getBoundingClientRect()
-
-    const topDelta = actualPosition.top - nominalPosition.top
-    if (topDelta !== 0) menu.style.top = `${nominalPosition.top - topDelta}px`
-
-    const leftDelta = actualPosition.left - nominalPosition.left
-    if (leftDelta !== 0) menu.style.left = `${nominalPosition.left - leftDelta}px`
+    const currentPosition = menu.getBoundingClientRect()
+    const delta = {x: caretRect.x - currentPosition.x, y: caretRect.y + caretRect.height - currentPosition.y}
+    menu.style.transform = `translate(${delta.x}px, ${delta.y}px)`
 
     this.combobox.start()
     menu.addEventListener('combobox-commit', this.oncommit)