Fix unregister cleanup

setCorrectionPanelSize() includes repositionAllMarkup() when needed

service.js

@@ -312,9 +312,8 @@ class BesService {
    */
   onScroll() {
     this.dismissPopup()
-    // Scroll panel is "position: absolute", we need to keep it aligned with the host element.
-    this.scrollPanel.style.top = `${-this.hostElement.scrollTop}px`
-    this.scrollPanel.style.left = `${-this.hostElement.scrollLeft}px`
+    this.canvasPanel.style.top = `${-this.hostElement.scrollTop}px`
+    this.canvasPanel.style.left = `${-this.hostElement.scrollLeft}px`
 
     if (this.hostElement !== this.textElement) {
       this.textElement.scrollTop = this.hostElement.scrollTop
@@ -336,7 +335,6 @@ class BesService {
    */
   onResize() {
     this.setCorrectionPanelSize()
-    this.repositionAllMarkup()
     if (this.eventSink && 'resize' in this.eventSink)
       this.eventSink.resize(this)
   }
@@ -362,9 +360,9 @@ class BesService {
    */
   addMistakeMarkup(match) {
     const range = match.range
-    const scrollPanelRect = this.scrollPanel.getBoundingClientRect()
-    const scrollX = scrollPanelRect.left
-    const scrollY = scrollPanelRect.top
+    const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
+    const scrollX = canvasPanelRect.left
+    const scrollY = canvasPanelRect.top
     match.highlights = Array.from(range.getClientRects())
     if (match.highlights.length === 0) return
     const dpr = window.devicePixelRatio
@@ -842,24 +840,23 @@ class BesService {
    * Creates auxiliary DOM elements for text adornments.
    */
   createCorrectionPanel() {
-    const panelParent = document.createElement('div')
-    panelParent.classList.add('bes-correction-panel-parent')
+    this.panelParent = document.createElement('div')
+    this.panelParent.classList.add('bes-correction-panel-parent')
 
     this.correctionPanel = document.createElement('div')
     this.correctionPanel.classList.add('bes-correction-panel')
 
-    this.scrollPanel = document.createElement('div')
-    this.scrollPanel.classList.add('bes-correction-panel-scroll')
-
     this.canvasPanel = document.createElement('canvas')
     this.canvasPanel.classList.add('bes-canvas')
     this.ctx = this.canvasPanel.getContext('2d')
     this.ctx.scale(1, 1)
 
-    panelParent.appendChild(this.correctionPanel)
-    this.correctionPanel.appendChild(this.scrollPanel)
-    this.scrollPanel.appendChild(this.canvasPanel)
-    this.textElement.parentElement.insertBefore(panelParent, this.textElement)
+    this.panelParent.appendChild(this.correctionPanel)
+    this.correctionPanel.appendChild(this.canvasPanel)
+    this.textElement.parentElement.insertBefore(
+      this.panelParent,
+      this.textElement
+    )
     this.setCorrectionPanelSize()
   }
 
@@ -867,9 +864,7 @@ class BesService {
    * Clears auxiliary DOM elements for text adornments.
    */
   clearCorrectionPanel() {
-    this.correctionPanel.remove()
-    this.scrollPanel.remove()
-    this.canvasPanel.remove()
+    this.panelParent.remove()
   }
 
   /**
@@ -879,15 +874,13 @@ class BesService {
     this.disableMutationObserver()
     const styles = window.getComputedStyle(this.hostElement)
     const hostRect = this.hostElement.getBoundingClientRect()
+    // Sync margins one by one. Firefox is not happy when syncing all at once.
     this.correctionPanel.style.marginLeft = styles.marginLeft
     this.correctionPanel.style.marginTop = styles.marginTop
     this.correctionPanel.style.marginRight = styles.marginRight
     this.correctionPanel.style.marginBottom = styles.marginBottom
     this.correctionPanel.style.boxSizing = styles.boxSizing
     this.correctionPanel.style.scrollBehavior = styles.scrollBehavior
-    this.correctionPanel.style.overflow = 'hidden'
-    this.scrollPanel.style.width = `${this.hostElement.scrollWidth}px`
-    this.scrollPanel.style.height = `${this.hostElement.scrollHeight}px`
     this.canvasPanel.style.width = `${this.hostElement.scrollWidth}px`
     this.canvasPanel.style.height = `${this.hostElement.scrollHeight}px`
     const dpr = window.devicePixelRatio
@@ -2252,6 +2245,14 @@ class BesTAService extends BesPlainTextService {
     return service
   }
 
+  /**
+   * Unregisters grammar checking service.
+   */
+  unregister() {
+    super.unregister()
+    this.textElement.remove()
+  }
+
   /**
    * Creates a clone div element for the <textarea> element
    *
@@ -2291,7 +2292,6 @@ class BesTAService extends BesPlainTextService {
     textElement.style.hyphens = styles.hyphens
     textElement.style.boxSizing = styles.boxSizing
     textElement.style.scrollBehavior = styles.scrollBehavior
-    textElement.style.overflow = 'hidden'
     textElement.style.border = styles.border
     textElement.style.borderRadius = styles.borderRadius
     textElement.style.padding = styles.padding

styles.css

@@ -48,12 +48,9 @@
   pointer-events: none;
 }
 
-.bes-correction-panel-scroll {
-  position: relative;
-}
-
 .bes-text-panel {
   position: absolute;
+  overflow: hidden;
   margin: 0px;
   color: transparent;
   border-color: transparent;